[React 공식 문서] <Profiler>

 

 

<Profiler>

프로그램적으로 React 트리의 렌더링 성능을 측정할 수 있다.

 

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

 

 

Props

id

: 측정 중인 UI 부분을 식별하는 문자열이다.

onRender

: 프로파일링 된 트리 내의 컴포넌트가 업데이트될 때마다 React가 호출하는 onRender 콜백이다.

 이 콜백은 렌더링된 내용과 소요된 시간에 대한 정보를 받는다.

 

주의사항

• 약간의 오버헤드(동작이나 프로세스를 실행할 때 발생하는 추가 부담)를 추가하기 때문에
  상용빌드에서는 비활성화 되어있다. 즉, 약간의 성능 손실을 막기 위해 비활성화 되어있다.
  만약 상용환경에서 프로파일링을 사용하고자 한다면 특수 상용 빌드를 활성화애야 한다.

 

onRender callback

렌더링된 내용에 대한 정보와 함께 onRender 콜백을 호출한다.

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

 

 

Parameters

id

: 방금 커밋한 <Profiler> 트리의 id 문자열 prop이다.

  여러 프로파일러를 사용하는 경우 어느 부분이 커밋되었는지 식별할 수 있다.

phase

: "mount","update" 혹은 "nested-update". 
이를 통해 트리가 처음 마운트되었거나, props, state 또는 훅의 변경으로 인한 리렌더링 여부를 알 수 있다.

actualDuration

: 현재 업데이트에 대해 <Profiler> 및 하위 컴포넌트들을 렌더링하는 데 걸린 시간(ms)이다.

  이 값은 하위 트리가 메모화(memo, useMemo)를 얼마나 잘 사용하는지 나타낸다.

  특정 props가 변경되는 경우에만 리렌더링 하면 되므로, 이상적으로 이 값은 최초 마운트 이후 크게 감소해야 한다.

baseDuration

: 최적화 없이 전체 <Profiler> 하위 트리를 리렌더링하는 데 걸리는 시간을 추정한 값(ms)이다.

  트리에 있는 각 컴포넌트의 가장 최근 렌더링 시간을 합산하여 계산한다.

  최악의 렌더링 비용(초기 마운트, 메모화 없는 트리)을 추정한다.

startTime

: 현재 업데이트 렌더링을 시작한 시점에 대한 숫자 타임 스탬프이다.

endTime

: 현재 업데이트를 커밋한 시점의 타임스탬프이다.
  이 값은 커밋의 모든 프로파일러 간에 공유되므로 그룹화가 가능하다.

 

 

Usage

 

프로그램적으로 렌더링 성능 측정하기

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

React 트리에 <Profiler> 컴포넌트를 감싸서 렌더링 성능을 측정한다.

트리 내의 컴포넌트가 업데이트를 커밋할 때마다 리액트가 호출하는 id,onRender 콜백의 두가지 prop이 필요하다.

 

 

 

애플리케이션의 다양한 부분 측정하기

<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> 컴포넌트를 중첩하여 사용할 수 있다.

 

 

 

<Profiler>는 가벼운 컴포넌트지만 필요한 경우에만 사용해야 한다.

사용할 때마다 애플리케이션에 약간의 CPU 및 메모리 오버헤드가 추가된다.