React - Profiler API

Profiler

• Profiler
  • React 트리 내 어디에나 추가될 수 있음
  • 트리의 특정 부분의 렌더링 비용을 계산해줌
  • props
    • id : 문자열
    • onRender : 콜백 함수, React 트리 내 컴포넌트의 업데이트가 커밋되면 호출됨
  • Profiler는 기본적으로 development에서만 동작함

// Create React App v3.2+ profiler 설치
yarn build --profile
npm run build -- --profile

render(
  <App>
    <Profiler id="Navigation" onRender={callback}>
      <Navigation {...props} />
    </Profiler>
    <Main {...props} />
  </App>
);

• React 트리 내에서 여러 개의 Profiler 컴포넌트를 사용하여 애플리케이션의 다른 부분들을 계산할 수 있음

render(
  <App>
    <Profiler id="Navigation" onRender={callback}>
      <Navigation {...props} />
    </Profiler>
    <Profiler id="Main" onRender={callback}>
      <Main {...props} />
    </Profiler>
  </App>
);

• 하위 트리의 다른 컴포넌트들을 계산하기 위해, Profiler 컴포넌트를 중첩하여 사용할 수 있음

render(
  <App>
    <Profiler id="Panel" onRender={callback}>
      <Panel {...props}>
        <Profiler id="Content" onRender={callback}>
          <Content {...props} />
        </Profiler>
        <Profiler id="PreviewPane" onRender={callback}>
          <PreviewPane {...props} />
        </Profiler>
      </Panel>
    </Profiler>
  </App>
);

Tip

• Profiler를 사용하면 CPU와 메모리 비용이 추가되므로, 필요할 때만 사용해야함

onRender 콜백 함수

• onRender 콜백 함수
  • Profiler 컴포넌트에 요구되는 prop
  • Profiler 트리 내의 컴포넌트에 업데이트가 커밋될 때마다 호출됨
  • 무엇이 렌더링되었는지, 얼마나 걸렸는지를 설명하는 입력값을 받음

function onRenderCallback(
  id, // 방금 커밋된 Profiler 트리의 "id"
  phase, // "mount" (트리가 방금 마운트가 된 경우) 혹은 "update"(트리가 리렌더링된 경우)
  actualDuration, // 커밋된 업데이트를 렌더링하는데 걸린 시간
  baseDuration, // 메모이제이션 없이 하위 트리 전체를 렌더링하는데 걸리는 예상시간 
  startTime, // React가 언제 해당 업데이트를 렌더링하기 시작했는지
  commitTime, // React가 해당 업데이트를 언제 커밋했는지
  interactions // 이 업데이트에 해당하는 상호작용들의 집합
) {
  // 렌더링 타이밍을 집합하거나 로그...
}

• onRender 콜백 함수의 props
  • id(string)
    • 방금 커밋된 Profiler 트리의 id prop
    • 트리의 어느 부분이 커밋되었는지 식별할 수 있음
  • phase: "mount" | "update
    • 해당 트리가 방금 마운트된 것인지(mount), prop, state 또는 hooks의 변화로 인해 리렌더링(upate)된 것인지 식별함
  • actualDuration(number)
    • 현재 업데이트에 해당하는 Profiler와 자손 컴포넌트들을 렌더링하는데 걸리는 시간
    • 하위 트리가 메모이제이션을 얼마나 활용하고 있는지를 암시함
    • 이상적으로 대부분의 자손 컴포넌트들은 특정 prop이 변할 때만 리렌더링이 필요하므로, 이 값은 초기 렌더링 이후 상당 부분이 감소해야함
  • baseDuration(number)
    • Profiler 트리 내 개별 컴포넌트들의 가장 최근에 렌더링하는데 걸린 시간
    • 렌더링 비용의 최악 케이스를 계산해줌(예: 초기 마운트나 메모이제이션이 없는 트리)
  • startTime(number)
    • React가 현재 업데이트에 대해 렌더링을 시작한 시간의 타임스탬프
  • commitTime(number)
    • React가 현재 업데이트를 커밋한 시간의 타임 스탬프
    • 커밋 상태의 모든 Profiler가 이 값을 공유하기 때문에 그룹화 가능함
  • interactions(Set)
    • 업데이트가 계획되었을 때 추적하고 있던 interaction의 집합 (예: render 또는 setState가 호출되었을 때)

Tip

• interactions을 추적하는 API는 시험단계지만, 업데이트의 원인을 식별하는데 사용 가능함