-
React 비용 계산하기 - React Profiler APIFrontEnd/React 2023. 1. 8. 10:28반응형
https://ko.reactjs.org/docs/profiler.html
Profiler API – React
A JavaScript library for building user interfaces
ko.reactjs.org
리액트를 활용하여 애플리케이션을 만든 후에 비용을 어떻게 계산할 수 있을까?
리액트는 업데이트된 부분만 리렌더링하는 특징이 있다.
이를 위해서 렌더링할 필요가 없는 부분은 memo함수를 이용하여 메모이제이션하는 등 여러 방법을 취하고 있다.
그럼 이게 잘 동작하는지, 최악의 비용은 어느 정도인지 계산할 수 있는 API가 바로 Profiler API이다.
코드는 아래와 같다.
render( <App> <Profiler id="Navigation" onRender={callback}> <Navigation {...props} /> </Profiler> <Main {...props} /> </App> );
예를 들어 Navigation을 profile하기 위해서 profiler로 감싸준다.
profiler는 2개의 props를 전달받는데 id = 문자열 onRender = callback함수를 전달받는다.
여기서 onRender callback함수에 필요한 정보들이 들어있다.
function onRenderCallback( id, // 방금 커밋된 Profiler 트리의 "id" phase, // "mount" (트리가 방금 마운트가 된 경우) 혹은 "update"(트리가 리렌더링된 경우) actualDuration, // 커밋된 업데이트를 렌더링하는데 걸린 시간 baseDuration, // 메모이제이션 없이 하위 트리 전체를 렌더링하는데 걸리는 예상시간 startTime, // React가 언제 해당 업데이트를 렌더링하기 시작했는지 commitTime, // React가 해당 업데이트를 언제 커밋했는지 interactions // 이 업데이트에 해당하는 상호작용들의 집합 ) { // 렌더링 타이밍을 집합하거나 로그... }
자세한 사용법은 Chrome브라우저에서 react developer tool을 이용하면 쉽게 이용해볼 수 있는데
해당 내용을 잘 설명해준 블로그 글을 첨부한다.
http://medium.com/wantedjobs/react-profiler를-사용하여-성능-측정하기-5981dfb3d934
React Profiler를 사용하여 성능 측정하기
Profiler 도구를 사용하여 React 성능을 측정하고, 어떻게 하면 성능을 높일 수 있는지 알아보겠습니다.
medium.com
반응형'FrontEnd > React' 카테고리의 다른 글
JSX 기본 내용 정리 (0) 2023.02.07 React 성능을 최적화 해보자! (0) 2023.01.02 동일한 패턴이 여러 컴포넌트에서 쓰이고 있다면? - React 고차 컴포넌트로 해결하기! (0) 2023.01.01 로딩중입니다...는 React로 어떻게 사용할까? (1) 2022.12.27 부모에서 자식까지 일일이 Prop전달하기 싫을 때? (0) 2022.10.02