📚 Reference

• 공식 문서 1

📜 Chapter

React 개발 도구

‣

devtool

Profiler

• Profiler
• <Profiler>를 통해 React 트리의 렌더링 성능을 프로그래밍 방식으로 측정할 수 있다.
• 애플리케이션의 렌더링 성능을 측정하기 위한 도구
• React 앱이 얼마나 자주 렌더링되는지, 그리고 특정 컴포넌트 트리를 렌더링하는 데 드는 "비용"이 얼마인지를 분석하여 성능 병목 현상을 파악하는 데 사용된다.

사용

React Developer Tools의 Profiler (시각적 도구)

• 대부분의 개발자가 가장 흔히 접하는 방식이다. 브라우저 확장 프로그램인 React DevTools를 설치하면 'Profiler' 탭이 생긴다.
• 주요 기능: 애플리케이션의 렌더링 과정을 기록하고, 불필요한 리렌더링이 발생하는 곳을 Flame Chart(불꽃 차트)나 Ranked Chart(순위 차트)로 보여준다.
• 특징: 코드를 수정하지 않고도 UI 상에서 어떤 컴포넌트가 왜(props 변화, state 변화 등) 렌더링되었는지 직관적으로 확인할 수 있다.

<Profiler> API (코드 기반)

• 코드 내에서 특정 부분의 성능 정보를 직접 수집하고 싶을 때 사용한다.

• 사용법

  <Profiler> 컴포넌트로 측정하고자 하는 컴포넌트 트리를 감싸면 된다. 두 개의 필수 props가 필요하다.

  1. id: 측정 단위를 구분하기 위한 고유한 이름
  2. onRender: 렌더링이 완료(commit)될 때마다 실행될 콜백 함수

import { Profiler } from 'react';

function Navigation() {
  const onRenderCallback = (
    id, // 방금 커밋된 Profiler 트리의 "id"
    phase, // "mount" (최초 렌더링) 또는 "update" (리렌더링)
    actualDuration, // 현재 업데이트를 렌더링하는 데 걸린 시간
    baseDuration, // 메모이제이션 없이 전체 트리를 렌더링했을 때의 예상 시간
    startTime, // 렌더링을 시작한 시각
    commitTime, // 렌더링이 완료된 시각
  ) => {
    // 측정 데이터를 로그로 남기거나 서버로 전송할 수 있습니다.
    console.log(`${id} [${phase}]: ${actualDuration}ms`);
  };

  return (
    <Profiler id="Navigation" onRender={onRenderCallback}>
      <MyHeader />
    </Profiler>
  );
}