[React] UseState는 렌더링 될 때 state를 변경해준다

js는 모든 코드가 기본적으로 비동기적으로 작동한다.
그래서 서버에서 데이터를 가져올 때 항상 async랑 await를 사용해서 비동기적으로 작동하도록 코드를 작성해야 한다.

어떤 라인에 await를 붙이면 그 아래 라인들은 이 라인이 실행될 때까지 기다렸다가 작동하게 된다.

 

 

그런데 await가 무용지물인 곳이 있었는데..! 그것이 바로 UseState이다.

await를 사용하면 동기적으로 코드가 실행되는 것은 맞다.

await setState()를 사용하면 setState가 실행된 후 아래 라인이 실행되긴 한다.

문제는 setState가 실행되는 것과, 실제로 state가 변경되는 것은 별개의 사건이라는 것이다.

setState는 실행되는 순간 state를 바꿔야겠다! 하고 메모만 해둔다.

그리고 실제로 state가 변경되는 순간은 화면이 렌더링 되는 시점이다.

 

따라서 함수 내에서 state를 변경하고, 변경한 state를 즉각적으로 사용해야하는 경우에는 함수 내부의 지역변수를 따로 선언하여 await를 사용해 값을 따로 저장해두는 것을 추천한다! ^_^