[리액트 딥다이브] - 06. 리액트 개발 도구로 디버깅하기

6.1. 리액트 개발 도구란?

react-dev-tools: 리액트 애플리케이션을 디버깅하기 위해 만들어진 개발 도구

브라우저 확장 프로그램을 통해 가장 편리하게 사용할 수 있음

확장 프로그램의 색상을 통해 환경을 확인할 수 있음

리액트 개발 도구를 사용할 수 있는 페이지에서 개발자 도구를 열면 Components와 Profiler 메뉴가 추가된다. 해당 탭을 통해 리액트 애플리케이션의 작동을 확인할 수 있다.

컴포넌트 트리

Components 탭에서는 리액트 애플리케이션의 컴포넌트 트리를 확인할 수 있다. 구조, props, hooks 등의 정보를 확인 가능

함수 선언식이나 함수 표현식으로 생성한 컴포넌트는 모두 함수명을 표시하지만, 그렇지 않은 컴포넌트는 다음과 같은 문제가 있음

익명 함수를 default로 export한 AnonymousDefaultComponent의 경우, 실제 default export로 내보낸 함수의 명칭을 추론할 수 없어 _default로 표시됨
memo를 사용해 익명 함수로 만든 컴포넌트를 감싼 경우, 함수명을 추론하지 못해 Anonymous로 표시, memo 라벨을 통해 memo로 감싸진 컴포넌트임은 확인 가능
고차 컴포넌트인 withSampleHOC로 감싼 HOCComponent인 경우 두 가지 모두 명칭을 추론하지 못해 Anonymous로 선언

리액트 16.9 버전 이후부터는 Anonymous가 _c3, _c5 등으로 개선됨.
그러나 정확히 컴포넌트를 특정하기가 어려운데, 컴포넌트를 기명 함수로 변경하여 해결 가능
혹은 displayName 속성을 추가해 명칭을 부여할 수 있다.

컴포넌트명과 props

컴포넌트명과 Key: 컴포넌트의 명칭과 key를 확인할 수 있음. 빨간색 경고 이모티콘은 해당 애플리케이션이 strict mode로 렌더링되지 않았음을 의미.

컴포넌트 도구

컴포넌트 도구에는 다음과 같은 3개의 아이콘이 있음.

눈 아이콘: 해당 컴포넌트가 HTML의 어디에서 렌더링됐는지 확인 가능. 선택 시 Element 탭의 해당 요소 위치로 이동.
벌레 아이콘: 클릭 시 console 탭에 해당 컴포넌트의 정보가 console.log로 기록. 해당 컴포넌트의 props, hooks, nodes 등이 기록됨.
소스코드 아이콘: 해당 컴포넌트의 소스코드를 확인할 수 있음. 난독화 상태로, {}버튼을 눌러 읽기 쉬운 형태로 변경할 수 있음.

컴포넌트 props: 해당 컴포넌트가 받은 props를 확인 가능, 원시값뿐만 아니라 함수도 확인 가능하며, 값이 함수인 props를 눌러 Go to definition을 통해 해당 함수가 선언된 코드로 이동할 수 있음.

컴포넌트 hooks: 사용 중인 훅 정보 확인 가능. useState는 State와 같이 use가 생략된 이름으로 나타남. 리액트에서 정의되지 않은 명칭은 useXXX로 선언된 커스텀 훅.

컴포넌트를 렌더링한 주체, rendered by: rendered by는 해당 컴포넌트를 렌더링한 주체가 누구인지 확인 가능.

리액트 렌더링 과정 중 발생한 상황을 확인하기 위한 도구.
렌더링 과정에 개입해 디버깅에 필요한 내용을 기록해야 하므로 프로덕션 빌드에서는 사용할 수 없어 개발 모드에서만 사용 가능.

설정 변경하기

주요 설정

General 탭의 Highlight updates when components render: 컴포넌트가 렌더링될 때마다 해당 컴포넌트를 하이라이트
Debugging 탭의 Hide logs during second render in Strict Mode: 엄격 모드인 경우, 원활한 디버깅을 위해 useEffect 등이 두 번씩 작동해, console.log가 두 번씩 찍힐 수 있는데, 이를 통해 막을 수 있음.
Profiler 탭의 Record why each component rendered while profiling: 프로파일링 도중 무엇 때문에 컴포넌트가 렌더링됐는지 기록

프로파일링

프로파일링 메뉴: 렌더링할 때 어떤 일이 벌어지는지 확인할 수 있는 도구로, 다섯 가지 버튼을 확인할 수 있음

Flamegraph: 불꽃 모양 아이콘으로, 렌더 커밋별 작업을 나타냄. 너비는 해당 컴포넌트의 렌더링 시간을 나타냄. 이를 통해 메모이제이션이나 특정 상태 변화에 따른 렌더링이 의도대로 제한적으로 발생하고 있는지 확인 가능

Ranked: 해당 커밋에서 렌더링하는 데 오랜 시간이 걸린 순으로 컴포넌트를 나열한 그래프. Flamegraph와의 차이는 렌더링이 발생한 컴포넌트만 보여준다는 점.

타임라인

Timeline은 시간이 지남에 따라 컴포넌트에서 어떤 일이 일어났는지 확인할 수 있음.