react.js] useState 데이터 바인딩 공부중 (스테픈 2km완료)

Vue에서는 데이터 바인딩을 사용할때

{{ }}
머스태시를 사용해서 변수를 태그에 넣어 사용했었다

react는 어떨까?

{} 중괄호에 넣으면 바로 변수를 인식해준다

괄호가 하나 줄어서 그런지 보기 편한것 같다

vue 3버전 에서는 변수의 값이 변경될때마다

태그에 반영하려면 ref나 reactive를 사용해서 처리했었다.

vue는 손에 익어서 그런지 직관적이긴 했다만은

react는 변수의 값이 변경될때마다 화면에 랜더링도 다시 해주려면 어떻게 해야할까?

답은 useState를 사용해야한다

usestate를 사용해서 변수를 만들려면

const 변수명 = useState() 이런식으로 쓰면 안된다

useState는 사용하려면 변수명 + 해당 변수의 값을 재할당 할 변수명

이렇게 두개를 정해줘야한다

다시 선언하자면

const [number, setnumber] = useState( 0 )

이런식으로 사용해야한다

number를 호출하면 0이 나오겠지만

number에 담긴 값을 변경하려면 setnumber에 값을 함수처럼 넣어주면 된다

setnumber(50)

이런식이면 값이 재할당된다.

그리고 화면에도 재랜더링이 된다.

일반적으로 만든 변수는 값이 바뀌어도 재랜더링이 되지 않기 때문에

우리가 보는 클라이언트 화면에서는 따로 바뀌는게 없다

그렇다면 앞에서 배열에 구조분해 할당하는 형식으로 변수를 생성하지 않고

일반 변수에 useState를 사용하면 어떻게 될까?

답은 간단하다

배열 형태로 값을 리턴하기때문에

mynumber[0] = 0
mynumber[1](변경할 값)
이런식으로 써야한다

근데 누가봐도 같은 변수를 하나는 기본변수 , 하나는 변경할때 쓰는 변수명

이렇게 지정해두는게 좀더 사용하는데 좋은것 같아서 이렇게 쓰는듯 하다.

---

스테픈은 2km완료했다

저녁에 비와서 힘들었다 ㅠ