[모던 리액트 Deep Dive] 6장 리액트 개발 도구로 디버깅하기

6.1 리액트 개발 도구란?

react-dev-tools는 리액트 애플리케이션 디버깅을 위해 만들어진 프로그램입니다. 브라우저 확장 프로그램으로 쉽게 설치하여 사용할 수 있습니다.

6.2 리액트 개발 도구 설치

크롬, 파이어폭스, 마이크로소프트 엣지 등 다양한 브라우저 환경에서 설치할 수 있습니다.

6.3 리액트 개발 도구 활용

6.3.1 컴포넌트

컴포넌트 탭에서는 컴포넌트 트리를 확인할 수 있습니다. props와 내부 hooks 등 다양한 정보를 확인해볼 수 있습니다.

컴포넌트 트리

임의로 선언된 함수는 컴포넌트 트리에서 이름이 추론되지 않는 경우가 있습니다.

리액트 16.8 버전에서는

• default export로 내보낸 함수의 명칭은 추론할 수 없어 _default로 표시
• memo로 감싼 컴포넌트는 Anonymous로 표시
• 고차 컴포넌트의 명칭도 제대로 추론하지 못함

때문에 기명 함수로 선언하는 것이 좋고, 함수에 displayName 속성을 추가하는 방법도 있습니다.

빌드 후 컴포넌트명이 난수화된 경우는 확인하기 어려워질 수 있습니다. 때문에 개발 모드에서만 제한적으로 참고하는 편이 좋습니다.

컴포넌트명과 props

• 컴포넌트의 key가 무엇인지 파악할 수 있음
• 컴포넌트가 사용 중인 훅의 정보를 파악할 수 있음
• 훅에 기명 함수를 넘겨주면 함수의 이름을 파악할 수 있음

6.3.2 프로파일러

렌더링 과정에 발생하는 상황을 확인할 수 있는 도구입니다. 프로덕션 모드에서는 사용할 수 없습니다.

• Flamegraph: 렌더 커밋별로 어떤 작업이 일어났는지 나타냅니다. 의도한 대로 메모이제이션되고 있는지, 렌더링 발생 횟수도 확인할 수 있습니다.
• Ranked: 렌더링에 오랜 걸린 시간 순서대로 나열한 그래프입니다.

Timeline

시간이 지남에 따라 컴포넌트에서 발생한 일을 확인할 수 있습니다.