<Profiler>를 사용하면 프로그래밍적으로 React 트리의 렌더링 성능을 측정할 수 있음.

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

---

Reference

<Profiler>

컴포넌트 트리를 <Profiler>로 감싸면 렌더링 성능을 측정할 수 있음.

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

Props

• id: 측정하려는 UI 부분을 식별하는 문자열.
• onRender: 프로파일링된 트리 내의 컴포넌트가 업데이트될 때마다 React가 호출하는 onRender callback. 이 callback은 렌더링된 내용과 소요 시간에 대한 정보를 받음.

Caveats

• 프로파일링은 약간의 오버헤드가 추가되므로 프로덕션 빌드에서는 기본적으로 비활성화되어 있음. 프로덕션 프로파일링을 사용하려면 프로파일링이 활성화된 특수 프로덕션 빌드를 사용하도록 설정해야 함.

onRender callback

React는 렌더링된 내용에 대한 정보와 함께 onRender callback을 호출함.

function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) {
  // Aggregate or log render timings...
}

Parameters

• id: 방금 커밋한 <Profiler> 트리의 문자열 id 프로퍼티. 이를 통해 여러 프로파일러를 사용하는 경우 트리의 어느 부분이 커밋되었는지 식별할 수 있음.
• phase: "mount", "update" 또는 "nested-update". 이를 통해 트리가 방금 처음 mount 되었는지 또는 props, state 또는 hooks의 변경으로 인해 다시 렌더링되었는지 알 수 있음.
• actualDuration: 현재 업데이트에 대해 <Profiler>와 그 자손을 렌더링하는 데 소요된 시간(밀리초). 이 값은 서브트리가 memoization(예: memo 및 useMemo)을 얼마나 잘 사용하는지를 나타냄. 대부분의 자손은 특정 props가 변경되는 경우에만 다시 렌더링하면 되므로 초기 mount 후에는 이 값이 크게 줄어드는 것이 이상적임.
• baseDuration: 최적화 없이 전체 <Profiler> 서브트리를 다시 렌더링하는 데 소요되는 시간의 추정값(밀리초). 트리에 있는 각 컴포넌트의 가장 최근 렌더링 시간을 합산하여 계산됨. 이 값은 최악의 렌더링 비용(예: 초기 mount 또는 memoization이 없는 트리)을 추정합니다. actualDuration과 비교하여 memoization가 작동하는지 확인할 수 있음.
• startTime: React가 현재 업데이트 렌더링을 시작한 시점에 대한 숫자 타임스탬프.
• commitTime: React가 현재 업데이트를 커밋한 시점의 숫자 타임스탬프. 이 값은 커밋의 모든 프로파일러 간에 공유되므로 원하는 경우 그룹화할 수 있음.

---

Usage

Measuring rendering performance programmatically

React 트리를 <Profiler> 컴포넌트로 감싸서 렌더링 성능을 측정할 수 있음.

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

두 가지 props가 필요함: id(문자열), 트리 내의 컴포넌트가 업데이트를 "커밋"할 때마다 React가 호출하는 onRender callback(함수)

Pitfall

프로파일링은 약간의 오버헤드가 추가되므로 프로덕션 빌드에서는 기본적으로 비활성화되어 있음. 프로덕션 프로파일링을 사용하려면 프로파일링이 활성화된 특수 프로덕션 빌드를 사용하도록 설정해야 함.

Note

<Profiler>를 사용하면 프로그래밍적으로 측정값을 수집할 수 있음. 상호작용이 가능한 프로파일러를 찾고 있다면 브라우저 확장 프로그램과 유사한 기능을 제공하는 React 개발자 도구의 Profiler 탭을 사용할 것.

Measuring different parts of the application

여러 <Profiler> 컴포넌트를 사용하여 애플리케이션의 여러 부분을 측정할 수 있음:

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

<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>는 경량 컴포넌트이지만, 사용할 때마다 애플리케이션에 약간의 CPU 및 메모리 오버헤드가 추가되기 때문에 꼭 필요한 경우에만 사용해야 함.