배칭 업데이트

여러 state 업데이트를 하나의 리렌더링으로 묶어 처리하는 리액트의 최적화 기법입니다.

핵심 개념

• 한 이벤트 핸들러 안에서 여러 번 setState를 호출해도 리액트가 이를 모아 한 번만 리렌더링합니다.
• 불필요한 리렌더링 횟수를 줄여 성능을 향상시킵니다.
• React 17까지는 리액트가 직접 제어하는 이벤트 핸들러 내부에서만 배칭이 적용됐습니다.
• React 18부터는 '자동 배칭(Automatic Batching)'이 도입되어 Promise, setTimeout, 네이티브 이벤트 핸들러 등 리액트 외부 영역에서도 배칭이 기본 적용됩니다.

예시

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

React 17과 React 18의 차이

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

setTimeout(() => {
    setCount(c => c + 1); // 배칭 미적용
    setFlag(f => !f);     // 배칭 미적용 (렌더링 2회)
}, 1000);

React 18의 자동 배칭은 다음 영역까지 확장됩니다.

• Promise 내부
• setTimeout/setInterval 내부
• 네이티브 이벤트 핸들러
• 기타 모든 이벤트 내부

주의사항

• 배칭은 Fiber Tree의 render phase에서 상태 변경을 모아 처리하는 방식으로 동작합니다.
• 배칭을 우회해 즉시 리렌더링이 필요하면 flushSync를 사용할 수 있지만, 성능상 남용은 피해야 합니다.

핵심 정리

배칭 업데이트는 여러 상태 변경을 하나의 렌더링으로 그룹화해 불필요한 리렌더링을 줄이는 기법이며, React 18부터는 비동기 코드에서도 자동으로 적용됩니다.

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