리액트 개발 도구로 디버깅하기

6.1 리액트 개발 도구란?

리액트 팀은 리액트 애플리케이션의 원활한 개발을 위한 개발 도구인 React-dev-tools를 만들어 제공하고 있다. 이번 장에서는 리액트 개발 도구를 브라우저 확장 도구로 설치해 리액트 애플리케이션을 디버깅하는 방법을 살펴본다.

6.2 리액트 개발 도구 활용하기

컴포넌트

Components 탭에서는 현재 리액트 애플리케이션의 컴포넌트 트리를 확인할 수 있다. 단순히 컴포넌트의 구조뿐만 아니라 props와 내부 hooks 등 다양한 정보를 확인할 수 있다.

컴포넌트 트리
기명함수로 선언되어 컴포넌트명을 알 수 있다면 해당 컴포넌트명을 보여주고, 익명함수로 선언돼 있다면 Anonymous라는 이름으로 컴포넌트를 보여준다. 리액트 개발 도구에서 확인하면 다음과 같다.

리액트 16.9버전에 오면서 익명함수로 선언된 컴포넌트들이 _c3, _c5 와 같이 명칭을 임의로 지정해주기 시작했다. 이는 이전에 Anonymous로 선언된 것 보다는 어떤 컴포넌트인지 추정할 수 있다는 점에서 가독성이 좋아졌다고 할 수 있다. 그러나 아직 어느 컴포넌트인지 특정하기는 어렵다.

컴포넌트명과 props

왼쪽 컴포넌트 트리에서 컴포넌트를 선택했을 때 해당 컴포넌트에 대한 자세한 정보를 보여주는 영역이다.

1. 컴포넌트명과 Key
   a. 컴포넌트의 명칭과 해당 컴포넌트를 나타낸다.
   b. 명칭은 Anonymous이며 key는 KidsValueProp이다.
   c. 빨간색 경고는 strict mode로 렌더링되지 않았다는 것을 의미한다.
2. 컴포넌트 도구
3. 컴포넌트 props
   a. 컴포넌트가 받은 props를 확인할 수 있다. 단순한 원시값뿐만 아니라 함수도 포함돼 있다.
4. 컴포넌트 hooks
   a. 컴포넌트에서 사용 중인 훅 정보를 확인할 수 있다. 여기에서 useState는 State와 같이 use가 생략된 이름으로 나타낸다.
5. 컴포넌트를 렌더링한 주체, rendered by
   a. 해당 컴포넌트를 렌더링한 주체가 누구인지 확인할 수 있다. 프로덕션 모드에서는 react-dom의 버전만 확인할 수 있지만, 개발모드에서는 해당 컴포넌트를 렌더링한 부모 컴포넌트까지 확인할 수 있다.

프로파일러

컴포넌트 메뉴가 정적인 현재 리액트 컴포넌트 트리의 내용을 디버깅하기 위한 도구라면 프로파일러는 리액트가 렌더링하는 과정에서 발생하는 상황을 확인하기 위한 도구다.

리액트 애플리케이션이 랜더링되는 과정에서 어떤 컴포넌트가 렌더링됐는지, 또 몇 차례나 렌더링이 일어났으며 어떤 작업에서 오래 걸렸는지 등 컴포넌트 렌더링 과정에서 발생하는 일을 확인할 수 있다.

프로파일링

1. 프로파일링 메뉴
   a. 리액트가 렌더링할 때 어떠한 일이 벌어지는지 확인할 수 있는 도구다.
   

2. Flamegraph
   a. 렌더 커밋별로 어떠한 작업이 일어났는지 나타낸다. 너비가 넓을 수록 해당 컴포넌트를 렌더링하는데 오래 걸렸다는 것을 의미한다.
   b. 렌더링되지 않은 컴포넌트는 회색으로 표시되면 ‘Did not render’라는 메시지가 표시되는 것을 확인할 수 있다. 이를 활용하면 개발자가 의도한 대로 메모이제이션이 작동하고 있는지, 혹은 특정 상태 변화에 따라서 렌더링이 의도한 대로 제한적으로 발생하고 있는지 확인하는데 도음을 얻을 수 있다.
   

3. Ranked
   a. 해당 커밋에서 렌더링하는데 오랜 시간이 걸린 컴포넌트를 순서대로 나열한 그래프다.
   b. Flamegraph와의 차이점은 모든 컴포넌트를 보여주는 것이 아니라 단순히 렌더링이 발생한 컴포넌트만 보여준다는 데 있다.

타임라인
시간이 지남에 따라 컴포넌트에서 어떤 일이 일어났는지를 확인할 수 있다.

리액트 18이상의 환경에서만 확인이 가능하며, state 값이 동기로 업데이트됐는지, 또 언제 업데이트가 이뤄졌는지 등을 확인할 수 있다.