[TIL/React] 2023/02/18

State: 리액트가 리액트인 이유

해당 강의에서는, '클릭을 할 때마다 숫자가 1씩 늘어나는' 버튼을 만들었다. 버튼을 만드는 과정을 통해 state를 이해해 봤다.

버튼 태그를 통해 '클릭 버튼'을 만들었고, 숫자가 올라가는 것을 보여주기 위해 'counter'라는 변수를 선언하고 div 태그에 작동할 수 있도록 추가해 줬다.

클릭을 하면 숫자가 증가하는 작동방식이 필요하기 때문에, increase라는 이름의 변수를 선언하고 해당 변수를 onClick에 적용했다.

그런데 클릭을 하면 콘솔창에는 counter가 증가하는 모습을 볼 수 있지만, UI에는 반영이 되지 않았다.

리액트는 '반응'을 하기 때문에 리액트이다. 값이 변하면 자동으로 UI를 바꿔주는 '반응'을 하는 것이 React의 본질이다. 그런데 변수가 바뀔 때마다 매번 반응을 해야 하는 것은 지나치게 비효율적이다.

그래서 '변수'가 바뀔 때마다 UI를 업데이트 하는 것이 아니라, 'State'가 바뀔 때 UI를 업데이트하게 된 것이다. 즉, 반응의 대상은 'State'이다.

리액트에서 제공하는 유용한 함수들을 'React Hook'이라고 하는데 그 중 하나인 'useState'를 활용하여 숫자의 증가를 UI에 반영해 봤다.

위 코드에서 'counter2'는 초기값이 담긴 state이고, 'setCounter2'는 state값을 변경해주는 함수이다.

UI가 바뀌기는 했는데, 숫자들이 이상하다.

기본적으로 State가 바뀌면, UI가 다시 렌더링된다. 상태를 바꾸기 위해 'setState 함수'를 실행시켰지만 바로 바뀌는 것이 아니다. 이러한 작동 방식을 '비동기적 작동 방식'이라고 한다. 함수가 한바퀴 다 돌아야 실행된다.

'비동기적 작동 방식'에 대한 이해는 더 필요하겠지만, 현재로서는 "UI 렌더링을 바로 해주기 어려워서 한 박자 느리게 동작하는구나..." 정도로 만족하고 넘어갔다.

그런데 counter는 왜 계속 1일까...?

상태가 변경돼서 다시 컴포넌트를 그려주는 것을 '리렌더링'이라고 하는데, 리렌더링 과정에서 component가 처음부터 다시 실행이 되면서 0으로 초기화시킨다. state값은 초기화를 시키지 않는다.

가위바위보 게임 기본 세팅

회고

코드 복습을 열심히 하자! 내일도 화이팅!