<aside> 💬 리렌더링이 많으면 리액트 Profiler를 통한 추적하기 까다로워진다. 이땐 크롬 Performance(성능) 탭을 활용할 수 있다. 더 자세한 내용은 링크 참고.
</aside>
리액트 컴포넌트의 리렌더링 원인을 파악할 때 리액트 개발자 도구의 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(커스텀 훅의 내장 훅)의 두번째 항목을 가리킨다. 즉, 리액트 개발자 도구에선 커스텀 훅 자체는 카운트 하지 않고, 커스텀 훅 내부에 있는 내장 훅을 카운트 한다.
<aside> 💬 아래 2가지 방법으로 컴포넌트 리렌더링 원인을 추적 해볼 수도 있다(써드파티는 추적 힘듦)