6관문. Profiler API

관문 6 / 7

React Profiler API를 사용하여 컴포넌트 렌더 시간을 측정하고 병목을 찾아라.

📖 이론 비급

Profiler API: 데이터 기반 최적화

느낌이 아닌 데이터로 최적화하라. <Profiler id="name" onRender={callback}>로 렌더 시간을 측정한다.

onRender(id, phase, actualDuration, baseDuration, startTime, commitTime)

actualDuration: 이 렌더에 걸린 실제 시간
baseDuration: 메모이제이션 없이 렌더했을 때 예상 시간
phase: 'mount' | 'update'

측정 결과로 어디에 memo/useMemo가 효과적인지 결정하라.

⚔️ 수련 코드

import { Profiler, useState } from 'react';

function onRenderCallback(id, phase, actualDuration, baseDuration) {
  console.log(`[${id}] ${phase}: ${actualDuration.toFixed(2)}ms (base: ${baseDuration.toFixed(2)}ms)`);
}

function ExpensiveTree({ count }) {
  // 인위적인 렌더 비용
  const items = Array.from({ length: count * 100 }, (_, i) => i);
  return <div>{items.length}개 아이템 처리됨</div>;
}

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

  return (
    <div>
      {/* TODO: Profiler로 ExpensiveTree를 감싸라 */}
      <ExpensiveTree count={count} />
      <button onClick={() => setCount(c => c + 5)}>트리 크기 증가</button>
      <button onClick={() => setUnrelated(u => u + 1)}>관련 없는 업데이트: {unrelated}</button>
      <p>콘솔에서 렌더 시간을 확인하라</p>
    </div>
  );
}

Open Sandbox