React Batching 이해하기

오늘은 프로젝트를 진행하며 알게 된 'Batching'이라는 기법에 대해 알아보려고 합니다. 이번 포스팅에서는 Batching의 개념과 이점을 살펴보겠습니다.

---

Batching이란?

'Batch'는 '일괄'이라는 뜻을 가지고 있습니다. 그렇다면 'Batching'이란 무엇일까요?

 

Batching은 '일괄 처리'라는 의미를 가집니다. 이 일괄 처리를 React에 적용시켜보면, 여러 개의 state 업데이트를 하나의 리랜더링으로 묶어 처리하는 것을 말합니다. 좀 더 자세한 이해를 위해 간단한 예제를 살펴보겠습니다. 

---

const [number, setNumber] = useState<number>(0);

const numberControler = () => {
  setNumber((number) => number + 1);
  setNumber((number) => number + 1);
};

useEffect(() => {
  console.log('current number is " + number);  
}, [number]);

 

위의 코드에서는 'numberControler'라는 함수는 2회의 setState를 통해 state를 변경하고, useEffect는 number라는 state가 변경될 때마다 콘솔에 로그를 찍고 있습니다.

 

실제로 'numberControler' 함수를 실행하면 어떤 결과가 나타날까요?

저는 setState가 2번 발생했고, number가 증가할 때마다 콘솔에 로그가 찍힐 것으로 예상하여 A 콘솔과 같은 결과를 예상했습니다.

# A 콘솔

current number is 1  
current number is 2

# B 콘솔

current number is 2

 

그러나 실제로는 B 콘솔과 같은 결과가 발생했습니다. 왜일까요?

 

그 이유는 바로 Batching에 있습니다. 앞서 말씀드렸다시피, React의 Batching은 여러 개의 state 업데이트를 하나의 리랜더링으로 묶어 처리하는 는데요. 위의 예제도 이와 마찬가지로, 상태 변화는 2번 발생했지만, Batching에 의해 2번의 상태 변화가 하나의 리랜더링으로 묶여 랜더링이 1번만 발생된 것입니다. 

 

 

그렇다면 Batching은 어떠한 이점을 가져올까요?

---

Batching의 이점

React가 소개하는 Batching의 가장 큰 이점은 당연하게도 랜더링 최적화입니다. 예시를 들어 설명해 보겠습니다.

 

여기 아파트와 엘리베이터가 있습니다. 9층 주민과, 10층 주민이 엘리베이터를 호출하여 1층으로 가려합니다. 이렇게 되면 일반적으로 엘리베이터는 9층과 10층에 방문한 후 모두를 태우고 1층에 도착하게 됩니다.

엘리베이터가 9층에 올라갔다가 1층으로 간 후 다시 10층으로 올라가 다시 1층으로 가는 것은 비효율적이기 때문입니다. Batching에 의해 단일 랜더링이 발생하는 이유도 결국 여기에 있습니다.

 

엘리베이터가 모든 층들을 모아 한번에 1층에 갔었던 것처럼, Batching 또한 불필요한 랜더링을 줄이기 위해서 매번 상태의 변경이 일어날 때마다 랜더링을 하는 것이 아닌, 일정기간의 상태 변경을 하나로 묶은 후 한 번에 업데이트 합니다.  그리고 이러한 단일 랜더링을 통해서 랜더링을 최적화합니다.