Profiler Api

Memoization의 구체적은 성능 최적화 방법을 사용하기 위해서는 Profiler라는 Api를 사용하면된다 Profiler는 React 애플리케이션이 렌더링하는 빈도, 렌더링 비용을 측정하며 애플리케이션의 성능이 느린부분을 확인할수 있는 Api이다.

사용방법

Profiler은 2가지 props id, onRender를 받는다.
id는 분석할 Component이름
onRender는 React는 프로파일 트리 내의 컴포넌트에 업데이트가 “커밋”될 때마다 호출되는 함수이다.

import React, { Profiler } from 'react';
function CommentItem(...) {
...
function onRenderCallback(
  id, // 방금 커밋된 Profiler 트리의 "id"
  phase, // "mount" (트리가 방금 마운트가 된 경우) 혹은 "update"(트리가 리렌더링된 경우)
  actualDuration, // 커밋된 업데이트를 렌더링하는데 걸린 시간
  baseDuration, // 메모이제이션 없이 하위 트리 전체를 렌더링하는데 걸리는 예상시간 
  startTime, // React가 언제 해당 업데이트를 렌더링하기 시작했는지
  commitTime, // React가 해당 업데이트를 언제 커밋했는지
  interactions // 이 업데이트에 해당하는 상호작용들의 집합
) {
  // 렌더링 타이밍을 집합하거나 로그...
}
  
  return (
    <Profiler id={'CommentItem'} onRender={onRenderCallback}>
      <div className="CommentItem" onClick={handleClick}>
        <span>{title}</span>
        <br />
        <span>{content}</span>
        <br />
        <span>{likes}</span>
        <br />
        <span>{rate}</span>
        <br />
        <span>{clickCount}</span>
      </div>
    </Profiler>
  );
}

export default memo(CommentItem);

자세한 부분은 React 공식 문서를 참고하자

React Profiler