<Profiler> – React
<Profiler>를 통해 React 트리의 렌더링 성능을 프로그래밍 방식으로 측정할 수 있습니다.
<Profiler id="App" onRender={onRender}>
<App />
</Profiler>
렌더링 성능을 측정하기 위해서 컴포넌트 트리를 <Profiler>로 감싸줍니다.
React는 onRender 콜백을 렌더링된 내용과 같이 호출합니다.
React 트리를 <Profiler> 컴포넌트로 감싸서 렌더링 성능을 측정합니다.
UI 컴포넌트를 식별하기 위한 id 문자열과 트리 내의 컴포넌트가 업데이트를 커밋할 때마다 React가 호출하는 onRender 콜백 함수 두 개의 Props가 요구됩니다.
중요합니다!
<Profiler>는 프로그래밍 방식으로 측정값들을 모아줍니다. 상호작용할 수 있는 프로파일러를 찾고 있다면, React 개발자 도구의 프로파일러 탭을 사용해 보세요. 브라우저 확장 프로그램으로써 유사한 기능을 제공합니다.
Components wrapped in <Profiler> will also be marked in the Component tracks of React Performance tracks even in profiling builds.
In development builds, all components are marked in the Components track regardless of whether they’re wrapped in <Profiler>.
<Profiler> 컴포넌트를 여러개 사용하여 애플리케이션을 부분별로 측정할 수 있습니다.
<Profiler> 컴포넌트들을 중첩해서 사용할 수 있습니다.
<Profiler>는 가벼운 컴포넌트이지만 사용할 때마다 애플리케이션에 약간의 CPU 및 메모리 오버헤드를 추가하기 때문에 필요할 때만 사용해야 합니다.