[React] 리액트 Profiler 프로파일러의 Hook 순서

리액트 컴포넌트의 리렌더링 원인을 파악할 때 리액트 개발자 도구의 Profiler(프로파일러) 탭을 활용한다.

 

만약 Profiler 탭에서 Hook 1 changed를 표시한다면, Hook 1은 Components 탭 → 해당 컴포넌트의 hooks 항목에서 1번째 내장 훅을(useState 등) 가리킨다.

 

이때 주의할 점은 Profiler에서 훅을 카운트할 때 useContext, 커스텀 훅은 생략한다는 것이다. 대신 커스텀 훅은 내부에 있는 모든 내장 훅(useContext 제외)을 카운트 한다.

 

예를 들어 내장 훅 1개와 커스텀 훅을 사용하는 컴포넌트가 있다고 가정해보자. 커스텀 훅 안에선 내장 훅 2개를 사용하고 있다. 그럼 이 컴포넌트의 훅 인덱스는 컴포넌트 내장 훅 1, 커스텀 훅 내장 훅 2, 3이 된다. 커스텀 훅에 있는 2번째 내장 훅 값이 변경되면 Profiler에선 Hook 3 changed를 표시한다.

function useHooks(defaultValue = 1) {
  const [hookTwo, setHookTwo] = useState(defaultValue); // 내장 훅 Hook 2
  const [hookThree, setHookThree] = useState(defaultValue); // 내장 훅 Hook 3

  return [hookTwo, setHookTwo, hookThree, setHookThree];
}

function App() { 
  const [hookOne, setHookOne] = useState(1); // 내장 Hook 1
  const [hookTwo, setHookTwo, hookThree, setHookThree] = useHooks(); // 커스텀 훅

  return (
    <div className="App">
      <button onClick={() => setHookOne((prev) => prev + 1)}>{`hookOne: ${hookOne}`}</button>
      <button onClick={() => setHookTwo((prev) => prev + 1)}>{`hookTwo: ${hookTwo}`}</button>
      <button onClick={() => setHookThree((prev) => prev + 1)}>{`hookThree: ${hookThree}`}</button>
    </div>
  );
}

 

hookThree 상태는 커스텀 훅의 두번째 내장 훅(useState)이다. 버튼을 클릭해서 이 값을 변경하면 리액트 개발자 도구 Profiler 탭에서 Hook 3 changed를 표시한다.

 

Hook 3은 Components 탭 → App 컴포넌트 → Hooks(커스텀 훅의 내장 훅)의 두번째 항목을 가리킨다. 즉, 리액트 개발자 도구에선 커스텀 훅 자체는 카운트 하지 않고, 커스텀 훅 내부에 있는 내장 훅을 카운트 한다.

 

💡 아래 2가지 방법으로 컴포넌트 리렌더링 원인을 추적 해볼 수도 있다(써드파티는 추적 힘듦)

• useWhyDidYouUpdate (커스텀훅)
• why-did-you-render (라이브러리)

 

💡 리렌더링이 많으면 리액트 Profiler를 통한 추적하기 까다로워진다. 이땐 크롬 Performance(성능) 탭을 활용할 수 있다. 더 자세한 내용은 링크 참고.

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요