React의 Batching과 Automatic Batching

1. React의 Batching이란?

🧐 Batching이란 무엇일까?

• Batching(배칭)은 영어 단어 batch에서 온 개념으로,

여러 개의 작업을 한 번에 묶어 처리하는 방식

"배달 건을 여러 개 모아서 한 번에 배달하는 방식"

🛠 React의 Batching 개념

✅ React 18 이전 vs 이후의 차이점

• React 17 이하: 이벤트 핸들러 내부에서만 Batching이 동작 (비동기 코드에서는 개별 렌더링 발생)

• React 18: 모든 상태 업데이트를 자동으로 배칭 (비동기 코드에서도 배칭 적용)

🎯 Batching을 이해하는 간단한 예제

예제 1: 초기 렌더링 시 console.log 출력값

import React, { useState, useEffect } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("count", count);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button>버튼 클릭</button>
    </div>
  );
}

2. 버튼 클릭 시 상태 업데이트와 Batching

예제 2: 상태 업데이트 배칭 테스트

import React, { useState, useEffect } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount((count) => count + 1);
    setCount((count) => count + 1);
    setCount((count) => count + 1);
  };

  useEffect(() => {
    console.log("count", count);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>버튼 클릭</button>
    </div>
  );
}

3. 왜 이렇게 동작할까? (React의 Batching 원리)

React의 Batching 동작 방식

1. React는 setState가 여러 번 호출되더라도, 동일한 이벤트 핸들러 내에서는 한 번의 렌더링으로 묶어 처리합니다.

2. 이를 통해 불필요한 렌더링을 방지하고 성능을 최적화합니다.

3. 상태 업데이트가 함수형 업데이트(setCount((count) => count + 1))로 이루어지면, 이전 상태를 기반으로 정확한 값이 계산됩니다.

4. 최종적으로 count는 0 → 3으로 업데이트되며, console.log는 한 번만 실행됩니다.

count 1
count 2
count 3

4. React 18의 Automatic Batching

예제 3: 비동기 코드에서 Automatic Batching 테스트

import React, { useState, useEffect } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  const handleAsyncUpdate = () => {
    setTimeout(() => {
      setCount((prev) => prev + 1);
      setText("Updated!");
      console.log("State updated!");
    }, 1000);
  };

  console.log("Component rendered!");

  return (
    <div>
      <p>Count: {count}</p>
      <p>Text: {text}</p>
      <button onClick={handleAsyncUpdate}>비동기 업데이트</button>
    </div>
  );
}

🧐 React 18 이전의 동작

• setTimeout 내부에서 setCount와 setText가 호출되면, 각각 개별적인 렌더링을 트리거하여 두 번의 렌더링이 발생합니다.

🚀 React 18 이후의 동작 (Automatic Batching 적용)

• React 18에서는 비동기 작업에서도 Automatic Batching이 적용됩니다.

• 따라서 setCount와 setText가 하나의 렌더링으로 처리되며, console.log("Component rendered!")는 한 번만 실행됩니다.

5. 결론

• React의 Batching은 여러 상태 업데이트를 한 번의 렌더링으로 묶어 최적화합니다.

• React 18의 Automatic Batching은 이벤트 핸들러뿐만 아니라 비동기 코드에서도 배칭을 수행합니다.

• 이를 통해 불필요한 렌더링을 줄이고, 성능을 더욱 효율적으로 개선할 수 있습니다.

다음 글 예고