🔍 State
이전 게시글에서 State는 현재 컴포넌트에서 생성이 가능하고 변할 수 있는 데이터라고 했었다.
오늘은 실제로 CodeSandbox를 이용해서 State에 대해 복습하고자 한다.
👨🏫 Count로 확인하는 State
📌 App.js
우선 State에 대해서만 다뤄보기 위해 만드는 중이던 Search 컴포넌트는 잠시 주석처리를 하고 Like 컴포넌트만 활성화했다.
📌 Like.js
Like.js 파일을 살펴보면 useState의 초깃값을 0으로 두고 저장변수는 count 갱신함수는 setCount로 지정했다.
📌 console.log
console.log를 보면 3번 클릭했을 때 count가 3이 아닌 2가 나온 것을 확인할 수 있다.
왜 결과값이 한박자씩 느린가?
👨🏫 정리
우선 state가 바뀔 때 마다 리렌더링이 발생해 UI를 바꿔준다.
setCount(count + 1); 코드처럼 UI를 바꿔야하는 코드를 처리하기 전에 함수를 먼저 처리한다.
즉 비동기적으로 작동되어 한박자 느린 것이다.
또한 state값은 react가 저장을 하기때문에 count가 누적되는 것을 확인할 수 있지만,
만약 let count = 0 과 같은 일반 변수를 선언하고 count = count + 1 함수를 작성하면 일반 변수는 react가 저장해두지 않아 UI가 업데이트 될 때마다 계속 초기화해 1이 반복되는 것을 알 수 있다.
