- <Profiler>를 사용하면 프로그램적으로 React 트리의 렌더링 성능을 측정할 수 있다.
<Profiler id="App" onRender={onRender}>
<App />
</Profiler>
- id : 측정 중인 UI 부분을 식별하는 문자열
- onRender : 프로파일링된 트리 내의 컴포넌트가 업데이트될 때마다 React가 호출하는 onRender 콜백. 이 콜백은 렌더링된 내용과 소요된 시간에 대한 정보를 받는다.
onRender callback
- React는 렌더링된 내용에 대한 정보와 함께 onRender 콜백을 호출한다.
function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) {
// Aggregate or log render timings...
// 렌더링 타이밍을 집계하거나 로그를 남깁니다...
}
- id : 방금 커밋한 <Profiler> 트리의 id 문자열 prop이다. 여러 프로파일러를 사용하는 경우 트리의 어느 부분이 커밋되었는지 식별할 수 있다.
- phase : 트리가 처음 마운트 되었거나, props, state 또는 훅의 변경으로 인해 다시 렌더링되었는지 알 수 있다.
- actualDuration : 현재 업데이트에 대핸 <Profiler> 및 하위 컴포넌트들을 렌더링하는 데 걸린 시간(밀리초).
- baseDuration : 최적화 없이 전체 <Profiler> 하위 트리를 다시 렌더링하는 데 걸리는 시간을 추정한 값(밀리초).
- startTime : React가 현재 업데이트 렌더링을 시작한 시점에 대한 숫자 타임스탬프.
- endTime : React가 현재 업데이트를 커밋한 시점의 타임스탬프.
Mesuring different parts of the application(애플리케이션의 다양한 부분 측정하기)
- 여러 <Profiler> 컴포넌트를 사용하여 애플리케이션의 여러 부분을 측정할 수 있다.
- <Profiler> 컴포넌트를 중첩할 수도 있다.
- <Profiler>는 가벼운 컴포넌트지만 필요한 경우에만 사용해야 한다. 사용할 때마다 애플리케이션에 약간의 CPU 및 메모리 오버헤드가 추가되기 때문이다.
* 참고 : React 공식문서(https://react-ko.dev/learn)
'이것저것 스터디📚 > React - 공식 문서' 카테고리의 다른 글
React 공식문서 -useSyncExternalStore (1) | 2023.10.18 |
---|---|
React 공식문서 -userId (1) | 2023.10.18 |
React 공식문서 -<StrictMode> (1) | 2023.10.11 |
React 공식문서 -useDeferredValue (0) | 2023.10.11 |
React 공식문서 -useInsertionEffect (0) | 2023.10.05 |