React의 상태 업데이트 배칭(batching)이란 무엇인가요?

배칭은 여러 상태 업데이트를 모아 한 번의 렌더링으로 처리하는 최적화입니다. 이전 상태 기반 업데이트는 함수형 setState를 사용해야 연속 업데이트에서도 안전합니다.

핵심 개념

핵심 기준은 여러 상태 변경과 렌더 횟수입니다. 이 개념은 단순한 용어가 아니라, 실제 코드나 시스템에서 반복적으로 생기는 문제를 다루기 위해 등장했습니다.

React에서는 상태 변화가 렌더링으로 이어지는 흐름을 예측 가능하게 만드는 것이 중요합니다. 컴포넌트 경계와 렌더링 비용을 이해하면 더 부드러운 UI를 만들 수 있습니다.

동작 흐름

1. 먼저 어떤 문제가 있는지 확인합니다.
2. 이 개념이 그 문제를 어떤 기준으로 나누거나 해결하는지 봅니다.
3. 실제 코드에서는 입력, 상태, 실행 순서, 비용이 어떻게 바뀌는지 확인합니다.
4. 마지막으로 한계와 부작용을 함께 점검합니다.

실제 예시

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

// React는 여러 업데이트를 모아 한 번의 렌더링으로 처리할 수 있습니다.

이전 상태를 기반으로 연속 업데이트할 때는 함수형 업데이트가 안전합니다.

실무에서 주의할 점

• 상태를 너무 위로 올리면 불필요한 렌더링 범위가 커집니다.
• memoization은 병목이 확인된 곳에 쓰는 편이 좋습니다.
• 사용자 입력, 로딩, 에러 상태를 함께 설계해야 실제 화면이 안정적입니다.

함께 연결해서 보면 좋은 키워드

React, State, Batching, 렌더링

정리

한 줄로 정리하면, 배칭은 여러 상태 업데이트를 모아 한 번의 렌더링으로 처리하는 최적화입니다. 이전 상태 기반 업데이트는 함수형 setState를 사용해야 연속 업데이트에서도 안전합니다. 실무에서는 개념을 적용하는 조건과 적용하지 않았을 때 생기는 문제까지 함께 이해하는 것이 중요합니다.

상태 업데이트 배칭이란?

배칭은 여러 setState 호출을 하나의 렌더링으로 묶는 최적화입니다. React 18부터는 이벤트 핸들러뿐 아니라 Promise, setTimeout 같은 비동기 경계에서도 자동 배칭이 더 넓게 적용됩니다.

function handleClick() {
  setCount((c) => c + 1);
  setFlag((f) => !f);
  // 렌더링은 보통 한 번만 발생
}

이전 상태 기반 업데이트

setCount(count + 1);
setCount(count + 1); // 같은 count를 참조해 1만 증가할 수 있음

setCount((c) => c + 1);
setCount((c) => c + 1); // 2 증가

여러 업데이트가 같은 이전 값에 의존한다면 함수형 업데이트를 사용해야 안전합니다.

즉시 DOM 반영이 필요할 때

드물게 업데이트 직후 DOM 측정이 필요하면 flushSync를 사용할 수 있지만, React의 최적화를 깨므로 남용하지 않습니다.