[React Basic] useState는 비동기이! (정확히는 setState)

reducer 공부하다 state 값이 한 박자 늦게 콘솔에 찍히는 것을 보고 이유를 알았는데 기억을 못하는 내 자신을 보며 기록하려고 한다.

우선 화면에 렌더링된 잔고는 6000원이다.
state에도 6000이라는 값이 담겨 있지만 콘솔에 console.log(money)를 출력하면 이전 값인 3000이 출력된다.

왜?

useState는 비동기처리한다. 정확하게는 setState가 비동기적으로 일을 처리하기 때문에 콘솔에는 렌더링 되는 값보다 한 박자 늦게 찍힌다.

참고영상

UI를 그려내는 일은 비용이 든다. 따라서 매번 state가 업데이트될 때마다 UI를 업데이트 시키기에는 높은 비용이 들기 때문에 state는 함수가 끝날 때가지 기다렸다가 값의 업데이트를 모두 취합해서 한번에 비동기적으로 값을 업데이트 시킨다.

하지만 여기서는 렌더링은 정상적으로 되지만 콘솔에 찍히는 값이 다를 뿐이라 useEffect를 사용하거나 callback으로 이전값을 불러와 setState를 할 필요는 없다.

state를 업데이트 시키는 함수가 끝나면 state를 업데이트 시키기 때문에 함수 안에서 바로 console.log를 찍으면 이전 값을 불러오게 된다.

const reducer = (state, action) => {
  console.log("reducer가 일합니다.", state, action);
  switch (action.type) {
    case ACTION_TYPE.deposit:
      return state + action.payload;
    case ACTION_TYPE.withdraw:
      return state - action.payload;
    default:
      return state;
  }
};

위 코드에서 console.log는 reducer 함수 내부에 state를 업데이트 시키는 로직이 있기 때문에 함수가 다 끝나고 렌더링이 되고 나서 다시 호출될 때 이전에 state가 가지고 있던 값을 출력할 수 있다.

setState는 비동기적이기 때문에 함수 안에서 바로 실행되는 것이 아니라 함수가 끝나고 실행이되며 그 후 UI를 업데이트 시킨다. 따라서 reducer 안에 있는 console.log는 한 박자 늦은 값을 출력시킨다.