setState를 했는데 바로 직전 상태값이 나와요

setState() 는 상태를 업데이트하는 함수인데, 이걸 이용해서 값을 업데이트 하고자 할때

내가 원하는 시점에 상태값이 변하지 않고 이전 상태값을 유지하는 상황을 종종 겪었다.

 

예를 들면..

어떤 셀렉박스에 onChange 이벤트를 걸어서 gu() 함수를 실행시킨다고 쳐보자.

gu() 안에서 setState(e.target.value) 를 해주고 ,

그 다음 줄에서 그 바뀐 상태값을 가지고 뭔가 동작하게끔 하는 코드를 작성했다 치자.

 

내 의도대로 동작하지 않고, state는 이전 value를 가지고 있을것이다.

 

이건 react 내부적으로 setState를 처리하는 방식과 관련있다.

 

우선 setState함수는 비동기함수가 아니다. 근데 비동기처럼 작동을 한다(?)

"State updates in React are asynchronous because they are batched and deferred for performance reasons."

- 공식 문서: https://react.dev/reference/react/useState

 

먼저 setState() 함수를 호출하면

1. 리액트는 이 함수를 업데이트큐에 집어넣는다.

2. 이벤트 루프가 끝날때까지 이 업데이트 함수들을 업데이트 큐에 다 모아뒀다가(= 스케줄링=작업순위 관리)

3.그 컴포넌트의 렌더링을 트리거 하면서 모아둔 setState() 함수들을 한번에 실행하고(=batching)

4. 바뀐 state값으로 화면을 그려준다.

 

이 과정은 컴포넌트별로 진행된다.

 

이걸 통해서 우리가 업데이트 된 상태를 화면에서 볼 수 있게 되는것이다.

 

그래서 처음 예시 상황에서 state는 이벤트 루프가 끝나기 전에 실행되는 코드일 것으로, 업데이트가 되지 않은 상태값일 것이다.

만약 내가 원하는 시점에 상태를 업데이트한 뒤 그걸 가지고 뭔가 하고 싶다면

 

상태 업데이트는 따로 해두고, 그 값을 직접 가져와서 쓰거나 useEffect를 사용해서 상태 변화를 감지한 뒤 써야 할 것 같다.