batchingsnapshot

React state update batching을 설명해 주세요

예상 시간
7분
30초 답변

꼬리질문

조금 더 깊게 물어본다면

답변 뒤에 이어질 수 있는 질문들을 하나씩 열어볼 수 있어요.

setState를 호출하면 state 변수는 바로 바뀌나요?

부가 설명

function Counter() {
  const [count, setCount] = useState(0);
 
  function handleClick() {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  }
 
  return <button onClick={handleClick}>{count}</button>;
}

이 코드는 클릭 한 번에 3이 아니라 1만 증가할 수 있습니다. 세 update가 모두 현재 render의 count 값인 0을 기준으로 1을 요청하기 때문입니다.

setCount((prev) => prev + 1);
setCount((prev) => prev + 1);
setCount((prev) => prev + 1);

이렇게 쓰면 이전 update 결과를 이어받아 계산할 수 있습니다.

React state는 “변수 하나가 즉시 바뀐다”기보다 “각 render가 자기 state snapshot을 가진다”고 이해하면 덜 헷갈립니다. event handler는 그 render에서 만들어진 함수이기 때문에, handler 안의 count도 그 render의 값입니다.

batching은 불필요한 render를 줄여 성능과 일관성을 높이기 위한 동작입니다. 다만 이 때문에 state update 직후에 바로 최신 DOM이나 최신 state를 읽으려는 코드는 의도와 다르게 동작할 수 있습니다.

한 줄 정리

React state update는 즉시 변수 값을 바꾸는 것이 아니라 다음 render를 예약하고, 여러 update는 batching되어 한 번에 처리될 수 있습니다.