2관문. Batching Mechanism

관문 2 / 7

여러 setState가 단 한 번의 리렌더로 묶이는 원리를 파악하고, flushSync로 강제 즉시 렌더를 실험하라.

📖 이론 비급

Batching: 업데이트를 묶는 엔진

리액트 18부터 이벤트 핸들러, setTimeout, Promise 등 모든 곳에서 자동 배칭이 적용된다. 여러 setState 호출이 하나의 렌더로 합쳐져 불필요한 중간 렌더를 방지한다.

flushSync: flushSync(() => setState(...))는 배칭을 우회하여 즉시 DOM 업데이트를 강제한다. 애니메이션·스크롤 제어처럼 순서가 중요한 곳에서 사용한다.

⚔️ 수련 코드

import { useState, flushSync } from 'react';

export default function BatchingDemo() {
  const [a, setA] = useState(0);
  const [b, setB] = useState(0);
  const [renders, setRenders] = useState(0);

  // TODO: renders 카운터로 실제 렌더 횟수를 측정해보자
  // 1) 일반 배칭: setA, setB를 같은 핸들러에서 호출
  // 2) flushSync: 각각을 flushSync로 감싸서 렌더 횟수 비교

  return (
    <div>
      <p>a: {a}, b: {b}</p>
      <p>렌더 횟수: {renders}</p>
      <button onClick={() => { setA(a + 1); setB(b + 1); }}>
        배칭 업데이트
      </button>
    </div>
  );
}

Open Sandbox