[React] Automatic Batching

1. Automatic Batching

React의 자동 배치 기능은 여러 개의 연속적인 업데이트를 단일 배치로 효율적으로 처리하여 성능을 향상시키는 메커니즘

 

기존방식 Batching => Automatic Batching

 

// 기존 버전
setTimeout(() => {
    setCount((count) => count + 1);
    setIsFull((isFull) => !isFull);
    //각 state의 업데이트 마다 재렌더링 발생
}, 1000);


// 현재 버전
setTimeout(() => {
    setCount((count) => count + 1);
    setIsFull((isFull) => !isFull);
    // 재렌더링이 마지막에 한번만 발생 *Automatic Batching
}, 1000;

 

2. Batching을 사용하는 이유

리액트에서 배칭을 사용하는 이유는 성능 향상과 불필요한 렌더링을 방지하기 위해서입니다.

1. 성능 향상: 배칭은 여러 개의 연속적인 업데이트를 단일 배치로 처리하여 성능을 향상시킵니다. React는 상태(state) 또는 속성(props) 변경에 대한 업데이트를 수집하고, 이러한 업데이트를 한 번에 처리함으로써 오버헤드를 최소화합니다. 이는 불필요한 리렌더링을 방지하고, 애플리케이션의 반응성을 향상시킵니다.
2. 불필요한 렌더링 방지: 배칭은 불필요한 렌더링을 방지하는 데에도 도움을 줍니다. 예를 들어, 한 컴포넌트에서 여러 번의 상태 변경이 발생한다면, React는 이러한 변경을 한 번에 처리하여 중간 렌더링을 최소화합니다. 이는 화면을 다시 그리는 작업을 최소화하여 성능을 향상시키고, 애플리케이션의 반응성을 높입니다.