React.useState()

나는 리액트를 알고 쓰는 걸까?

요즘 리액트를 사용하면 할수록 "내가 리액트를 잘 알고 쓰는게 맞을까?" 라는 생각을 자주 하게된다. 

useState() 는 비동기인가?

답부터 하자면, useState 는 비동기이다. 사진을 보자 

useState를 사용해 state의 값을 변경하고 콘솔에 찍어보자

나의 원하는 형태의 변화가 아닌 state가 변경되지 모습을 볼 수 있다.

왜 이럴까? 

리액트는 가상돔을 활용하여 실제돔과 비교하고, 상태의 변화를 감지하여 변화된 내용만을 re-render 하게 됩니다. 이 때 여러개의 state의 변화가 생긴다면 사용자는 그때마다 render 과정을 거치게 될 것 입니다. 이를 방지하기 위해, 변화를 바로바로 처리하는게 아니라 모아두었다가 한번에 처리하는 방법을 사용하고 있습니다. 

어떻게 해결할까?

useEffect를 활용해보자. 

의존성 배열에 변화를 감지하고자 하는 상태를 넣는다.

처음 화면이 render 될 때는 setTotalList와 console.log(totalList)가 비동기적으로 실행되기 때문에 길이가 0인 배열이 찍히는데, 
이후 totallist의 상태가 변경되면서 useEffect에서 변화를 감지하고 새로운 console.log(totalList)가 찍히는걸 볼 수 있다.