[뷰쟁이의 리액트 시작하기] react useState로 변수를 선언해보자

[!이시중] 2021년 10월 28일 21:55에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/43 에서 확인할 수 있음.

 

---

 

뷰쟁이가 react를 처음 맞이하고 가장 적응이 안 되었던 부분은 바로 변수의 선언이다. 우선 react hook에서는 useState를 통하여 변수를 선언하고, 초기화시키고, 변형시킬 수 있다. 물론 흔히 아는 방식처럼

const test = ‘테스트입니다’;

라는 식으로도 선언과 초기화를 시킬 수 있지만, 이는 변형시킬 수 없다는 문제가 있다. 뒤의 글을 읽으면 자연스레 이해하게 되리라.

 

먼저 useState를 쓰는 형식이 있다.

const [ 변수명, 변수정의함수 ] = useState(기본값);

const [ count, setCount ] = useState(0);

즉, count + 1을 하기 위하여 반드시

<Button
  onClick={() => setCount(count + 1)}
>
</Button>

다음과 같은 형식으로 써야만 인식한다.

 

이는 회원가입과 같은 input을 사용할 때, vue와는 아주 큰 차이를 보인다. 다음과 같은 변수를 선언한 후, input에서 그 값을 받는다고 가정해보자.

const inputText = '';

뷰의 경우

<input v-model='inputText' />

와 같이 작성하지만

리액트의 경우

<input onChange={(value) => setInputText(value);} />

로 반드시 useState의 형식으로 선언해 준 후, 사용하여야 값을 변경시킬 수 있다.

 

왜 이렇게 진행하는걸까? 여기서 우리는 '바인딩'을 간단하게 알아봐야 한다.

양방향 데이터 2 way binding을 가지고 있는 뷰는

input  <------->  watcher  <------->  data

다음과 같이 watcher가 input을 감지해 data의 변화를 적용해준다.

보통의 단방향 데이터 1 way binding은

data -----> watcher -----> input -----> event -----> data

의 프로세스를 거치게 되어 event 과정이 있어야지만 data에 적용을 한다.

하여 데이터를 변경시키기 위해서 event 즉 useState의 변수 정의 함수가 필요한 것이다.