리액트의 Batching Update에 대해서 설명해주세요.

분야: 프론트엔드

리액트의 배칭 업데이트(Batching Update)는 여러 상태 업데이트를 하나의 리렌더링으로 그룹화하는 최적화 기법입니다.

리액트는 성능 향상을 위해 여러 setState 호출을 일괄 처리하여 불필요한 렌더링을 방지합니다.

예를 들어, 하나의 이벤트 핸들러 내에서 여러 번 상태를 업데이트하는 경우, 리액트는 이를 내부적으로 모아서 한 번의 업데이트로 처리합니다.

function handleClick() {
  setCount(c => c + 1); // 첫 번째 업데이트
  setFlag(f => !f);     // 두 번째 업데이트
  setName('리액트');     // 세 번째 업데이트
  // 이 세 가지 상태 변경은 배칭되어 단 한 번의 렌더링만 발생합니다
}

React 18 이전에는 이벤트 핸들러 내부와 같은 리액트가 제어하는 영역에서만 배칭이 적용되었습니다.

그러나 React 18부터는 '자동 배칭'이 도입되어 Promise, setTimeout, 네이티브 이벤트 핸들러 등 리액트 외부 영역에서도 배칭이 기본적으로 적용됩니다.

배칭을 통해 불필요한 리렌더링을 줄이고 계산 비용을 절감하여 애플리케이션의 성능을 향상시킬 수 있습니다.

React 18의 자동 배칭(Automatic Batching)이 이전 버전과 어떻게 다른가요? 🤔

React 18 이전에는 배칭이 React의 이벤트 핸들러 내부에서만 작동했습니다.

// React 17에서:
function handleClick() {
  setCount(c => c + 1); // 이벤트 핸들러 내부: 배칭 적용됨
  setFlag(f => !f);     // 배칭 적용됨 (한 번의 렌더링)
}

setTimeout(() => {
  setCount(c => c + 1); // React 외부 환경: 배칭 적용 안됨
  setFlag(f => !f);     // 배칭 적용 안됨 (두 번의 렌더링 발생)
}, 1000);

React 18에서는 자동 배칭이 도입되어 비동기 작업을 포함한 여러 상태 업데이트에 배칭이 적용됩니다.

1. Promise 내부
2. setTimeout/setInterval 내부
3. 네이티브 이벤트 핸들러
4. 기타 모든 이벤트 내부

이러한 변화로 개발자가 별도의 최적화 작업 없이도 더 효율적인 렌더링을 기대할 수 있게 되었습니다.

- 📚 추가 학습 자료를 공유합니다.

• 리액트 배칭의 모든 것
• 리액트 공식 문서