[React] Automatic Batching과 렌더링 최적화

inflearn의 리액트를 다루는 기술 강의를 듣고 정리한 내용입니다.

batching이 뭔데?

검색 결과를 토대로 유추해보면 batching은 어떠한 자료를 모아두었다 일괄적으로 처리를 하는 뜻이라는 것을 알 수 있다. 이를 토대로 React에서는 어떤 의미로 쓰이는지 알아보자.

React에서의 batching

click 버튼을 누를 때 마다, 비동기 작업이 실행되며 상태가 업데이트 된다.
상태가 업데이트 될 때, useEffect에서 dependency에 의해, count1과 count2를 console.log를 출력한다.
count1과, count2에 상태 업데이트를 실행 할 경우 console.log는 몇 번 실행이 될까?

버튼을 1번 클릭을 하면, 총 2번이 실행이 된다.

그러나 비동기 코드를 제거한 뒤 버튼을 클릭하면 1번만 실행이 된다.
즉 비동기 코드가 존재할 때는, 1번만에 업데이트 될 것도, 2번에 걸쳐 업데이트가 된다는 문제가 발생한다.

Automatic Batching

즉 이 문제를 해결하는 방법이, React18부터 적용된 Automatic Batching이다. 위의 2번의 업데이트가 실행되던 코드를 React18에서 실행한다면 상태 업데이트는 1번만 실행된다.

그러나 비동기 코드의 위치를 상태 업데이트하는 코드 사이로 옮긴다면 업데이트는 또 다시 2번 실행된다.
이는 당연히, React 18 인지 아닌지에 상관 없이, count1을 업데이트 한 후 뒤의 코드는 시간이 지난 뒤에 업데이트가 되기 때문에 2번에 나뉘어서 업데이트를 하게 된다.

React는 그렇다면 왜 Batching을 설계했을까?

React 개발자 Dan Abramov는 다음과 같이 얘기한다.

"Batching is when React groups multiple state updates into a single re-render for better performance." Batching은 React가 여러 상태 업데이트를 하나의 렌더링으로 그룹화 하는 것으로, 더 나은 성능을 위한 것이다.

즉, 단기간에 일어나는 상태 변화를 매번 렌더링 하지 않고 일괄 처리를 함으로써, 성능을 최적화 하는 것이다.

레스토랑에 비유 한다면, 레스토랑 직원은 하나의 주문을 받을 때 마다 주방에 방문하는 것이 아니라
단기간내에 들어오는 여러 주문을 취합해 한번에 주방으로 가는 방식을 택하는 것이다.

이는 setState가 비동기로 동작하는 이유이기도 하다.
일정 시간이 끝날 때 까지 setState를 실행하지 않고 모아두었다가 한번에 처리하는 것이다.

Automatic Batching을 사용하기 위한 조건

먼저, Batching은 React Event 단위로 발생한다.

반드시 createRoot라는 함수를 이용하여 렌더링을 해야 Automatic Batching이 활성화 된다.

참고

[Github]Automatic batching for fewer renders in React 18
[React]Batching을 활용한 렌더링 최적화