[React] setState를 했는데 console.log엔 새로운 값이 반영이 안되는 이유

React 사용하면서 setState를 실행하고 값이 잘 바뀌었는지 확인하기위해 바로 밑줄에 console.log(state) 해본 경험이 있을것이다. 이때 console.log는 새로 입력해준값이 아닌 이전의 값을 출력한다. 대체 왜일까?

const [state, setState] = useState<number>(0);

const incrementState = () => {
    setState(state + 1);
    setState(state + 1);
    setState(state + 1);
    setState(state + 1);
    
    console.log(state);
}

//예상 출력
// 4
// ---
//실제 출력
// 0

결론부터 말하자면 setState는 비동기로 동작하기 때문이다

setState가 비동기로 동작하는 이유

useState는 Object.is 메소드를 사용해 state의 값이 변하였는지 감지하고, state가 변하였다면 해당 컴포넌트부터 자식컴포넌트까지 render 함수를 실행해 rerendering한다

그럼 state값을 10000번 변경하면 화면이 10000번 리렌더링된다면? 분명 성능면에서 이슈가 생길것이다

이를 방지하기위해 React는 16ms 동안 변경된 상태 값들을 모아서 한번에 리렌더링을 진행한다

이것을 Batch Update라고 한다

비동기 처리가 어떻게 진행되는지를 모른다면 그래서 한번에 처리하는거랑 비동기랑 무슨 연관이냐고 할 수도 있다

이럴땐 비동기 처리가 어떻게 이루어지는 지 포스팅해놓은 글을 읽고 온다면 이해할수 있을것이다

https://hae-ong.tistory.com/96

자바스크립트 비동기 처리 과정

 

위와 같은이유로 아래 코드는 

const [state, setState] = useState<number>(0);

const incrementState = () => {
    setState(state + 1);
    setState(state + 1);
    setState(state + 1);
    setState(state + 1);
    
    console.log(state);
}

//예상 출력
// 4
// ---
//실제 출력
// 0

incrementState 함수가 끝난뒤에 ( stack이 다 비워진 뒤에 ) state의 update가 반영된다