[react 번역] <Profiler>

출처: https://react.dev/reference/react/Profiler

---

개요

<Profiler>는 React 트리의 렌더링 성능을 프로그래밍적으로 측정할 수 있게 해주는 컴포넌트입니다.

<Profiler id="App" onRender={onRender}>
  <App />
</Profiler>

---

Reference

<Profiler>

컴포넌트 트리를 <Profiler>로 감싸면 해당 트리의 렌더링 성능을 측정할 수 있습니다.

<Profiler id="App" onRender={onRender}>
  <App />
</Profiler>

Props

• id: 측정할 UI 부분을 식별하는 문자열입니다.
• onRender: 트리 내 컴포넌트가 업데이트될 때마다 호출되는 콜백 함수입니다. 렌더링 정보와 소요 시간을 인자로 받습니다.

Caveats

• 프로파일링은 약간의 오버헤드가 있으므로, 프로덕션 빌드에서는 기본적으로 비활성화되어 있습니다. 프로덕션에서 사용하려면 별도의 프로파일링 빌드를 활성화해야 합니다.

---

onRender 콜백

React는 렌더링이 발생할 때마다 onRender 콜백을 호출합니다.

function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) {
  // 렌더링 타이밍을 집계하거나 로그로 남길 수 있습니다.
}

파라미터

• id: <Profiler>의 id prop 값
• phase: "mount", "update", "nested-update" 중 하나. 트리가 처음 마운트되었는지, props/state/Hooks 변경으로 리렌더링되었는지 구분합니다.
• actualDuration: 이번 업데이트에서 <Profiler>와 그 하위 트리의 렌더링에 소요된 ms 단위 시간
• baseDuration: 최적화 없이 전체 트리를 렌더링하는 데 걸릴 것으로 추정되는 시간
• startTime: 현재 업데이트 렌더링이 시작된 시각(숫자)
• commitTime: 현재 업데이트가 커밋된 시각(숫자)

---

사용법

렌더링 성능 측정하기

<App>
  <Profiler id="Sidebar" onRender={onRender}>
    <Sidebar />
  </Profiler>
  <PageContent />
</App>

• id와 onRender 콜백을 반드시 지정해야 합니다.
• onRender 콜백에서 렌더링 시간, 최적화 효과, 커밋 시각 등을 집계할 수 있습니다.

여러 부분 측정 및 중첩

여러 Profiler를 사용해 앱의 다양한 부분을 각각 측정할 수 있습니다.

<App>
  <Profiler id="Sidebar" onRender={onRender}>
    <Sidebar />
  </Profiler>
  <Profiler id="Content" onRender={onRender}>
    <Content>
      <Profiler id="Editor" onRender={onRender}>
        <Editor />
      </Profiler>
      <Preview />
    </Content>
  </Profiler>
</App>

• Profiler는 가볍지만, 꼭 필요한 곳에만 사용하는 것이 좋습니다. 각 Profiler마다 CPU/메모리 오버헤드가 추가됩니다.

---

참고 및 주의사항

• <Profiler>는 프로그래밍적으로 측정값을 수집할 때 사용합니다. 인터랙티브한 프로파일링은 React DevTools의 Profiler 탭을 활용하세요.
• 프로덕션 빌드에서 성능 측정이 필요하다면, 별도의 프로파일링 빌드를 활성화해야 합니다.

---

출처: https://react.dev/reference/react/Profiler