<Profiler>

소개

<Profiler>는 React 트리의 렌더링 성능을 프로그래밍 방식으로 측정할 수 있게 해줘요.

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

쉽게 말하면, 컴포넌트가 렌더링되는 데 얼마나 시간이 걸리는지를 코드로 직접 측정할 수 있는 도구라고 생각하면 돼요.

---

레퍼런스

<Profiler>

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

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

Props

• id: 측정하고 있는 UI 부분을 식별하는 문자열이에요. 예를 들어 "Sidebar"나 "Content" 같은 이름을 지어주면, 나중에 어떤 부분의 성능을 측정한 건지 구별할 수 있죠.
• onRender: 프로파일링 대상 트리 안의 컴포넌트들이 업데이트될 때마다 React가 호출하는 onRender 콜백이에요. 뭐가 렌더링됐는지, 그리고 얼마나 시간이 걸렸는지에 대한 정보를 받아요.

주의사항

• 프로파일링은 약간의 추가 오버헤드를 발생시키기 때문에, 프로덕션 빌드에서는 기본적으로 비활성화되어 있어요. 프로덕션 환경에서도 프로파일링을 사용하고 싶다면, 프로파일링이 활성화된 특별한 프로덕션 빌드를 활성화해야 해요.

부연 설명: 프로파일링 자체가 성능을 측정하는 도구이다 보니, 측정하는 행위 자체도 약간의 성능 비용이 들어요. 그래서 실제 사용자에게 배포하는 프로덕션 빌드에서는 기본적으로 꺼져 있는 거예요. 개발 중에는 자유롭게 사용하면 됩니다!

---

onRender 콜백

React는 렌더링된 내용에 대한 정보와 함께 여러분의 onRender 콜백을 호출해요.

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

매개변수

• id: 방금 커밋된 <Profiler> 트리의 문자열 id prop이에요. 여러 개의 프로파일러를 사용하고 있다면, 이 값으로 트리의 어떤 부분이 커밋됐는지 식별할 수 있어요.
• phase: "mount", "update" 또는 "nested-update" 중 하나에요. 이걸 통해 트리가 처음으로 마운트된 건지, 아니면 props, state, 또는 Hooks의 변경으로 인해 리렌더링된 건지 알 수 있어요.

부연 설명: "mount"는 컴포넌트가 처음 화면에 나타날 때, "update"는 이미 화면에 있는 컴포넌트가 다시 렌더링될 때, "nested-update"는 렌더링 중에 발생한 중첩된 업데이트를 의미해요.

• actualDuration: 현재 업데이트에 대해 <Profiler>와 그 하위 컴포넌트들을 렌더링하는 데 소요된 밀리초 수에요. 이 값은 서브트리가 메모이제이션(예: memo와 useMemo)을 얼마나 잘 활용하고 있는지를 나타내요. 이상적으로는 초기 마운트 이후에 이 값이 크게 줄어들어야 해요. 왜냐하면 많은 하위 컴포넌트들은 자신의 특정 props가 변경될 때만 리렌더링하면 되거든요.

부연 설명: 쉽게 말해서, actualDuration이 초기 마운트 때는 크지만 이후 업데이트에서 확 줄어든다면 메모이제이션이 잘 되고 있다는 뜻이에요!

• baseDuration: 아무런 최적화 없이 전체 <Profiler> 서브트리를 리렌더링하는 데 얼마나 걸릴지를 추정하는 밀리초 수에요. 트리 내의 각 컴포넌트의 가장 최근 렌더링 시간을 합산해서 계산돼요. 이 값은 렌더링의 최악의 경우 비용(예: 초기 마운트이거나 메모이제이션이 전혀 없는 트리)을 추정해요. actualDuration과 비교해보면 메모이제이션이 제대로 작동하고 있는지 확인할 수 있어요.

부연 설명: baseDuration은 "만약 모든 컴포넌트가 매번 다시 렌더링된다면 얼마나 걸릴까?"에 대한 답이에요. actualDuration이 baseDuration보다 훨씬 작다면, memo나 useMemo 같은 최적화가 효과를 보고 있다는 거예요!

• startTime: React가 현재 업데이트를 렌더링하기 시작한 시점의 숫자 타임스탬프에요.
• commitTime: React가 현재 업데이트를 커밋한 시점의 숫자 타임스탬프에요. 이 값은 하나의 커밋 안에 있는 모든 프로파일러들 사이에서 공유되기 때문에, 원한다면 이 값을 기준으로 프로파일러들을 그룹화할 수 있어요.

---

사용법

프로그래밍 방식으로 렌더링 성능 측정하기

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

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

두 개의 props가 필요해요: id (문자열)와 onRender 콜백 (함수)인데, 트리 내의 컴포넌트가 업데이트를 "커밋"할 때마다 React가 이 콜백을 호출해요.

⚠️ 주의

프로파일링은 약간의 추가 오버헤드를 발생시키기 때문에, 프로덕션 빌드에서는 기본적으로 비활성화되어 있어요. 프로덕션 환경에서도 프로파일링을 사용하고 싶다면, 프로파일링이 활성화된 특별한 프로덕션 빌드를 활성화해야 해요.

참고

<Profiler>는 프로그래밍 방식으로 측정값을 수집할 수 있게 해줘요. 인터랙티브한 프로파일러를 찾고 있다면, React Developer Tools의 Profiler 탭을 사용해보세요. 브라우저 확장 프로그램으로 비슷한 기능을 제공해줘요.

<Profiler>로 감싸진 컴포넌트들은 프로파일링 빌드에서 React Performance tracks의 Component tracks에도 표시돼요.
개발 빌드에서는 <Profiler>로 감싸져 있든 아니든 모든 컴포넌트가 Components track에 표시돼요.

---

애플리케이션의 여러 부분 측정하기

여러 개의 <Profiler> 컴포넌트를 사용해서 애플리케이션의 다양한 부분을 측정할 수 있어요:

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

<Profiler> 컴포넌트를 중첩해서 사용할 수도 있어요:

// {5,7,9,12}
<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와 메모리 오버헤드가 추가되거든요.

부연 설명: 프로파일러를 여기저기 무분별하게 넣는 것보다는, 성능 문제가 의심되는 특정 영역에 집중적으로 배치하는 게 좋아요. 개발 중에 성능 병목을 찾기 위해 사용하고, 문제를 해결한 후에는 제거하는 패턴으로 활용하면 됩니다!

---

사이트맵

모든 문서 페이지 개요