React 비용 계산하기 - React Profiler API

https://ko.reactjs.org/docs/profiler.html

Profiler API – React

리액트를 활용하여 애플리케이션을 만든 후에 비용을 어떻게 계산할 수 있을까?

 

리액트는 업데이트된 부분만 리렌더링하는 특징이 있다.

이를 위해서 렌더링할 필요가 없는 부분은 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를 사용하여 성능 측정하기