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

리액트 개발 도구란?

Components 탭에서는 현재 리액트 애플리케이션의 컴포넌트 트리를 확인할 수 있다.
props와 hooks 등 다양한 정보를 확인할 수 있다.
컴포넌트 트리
- 리액트 애플리케이션 전체의 트리 구조를 한 눈에 보여준다.
- tsMemoizedComponent.displayName = '메모 컴포넌트입니다.'; -> displayName을 설정하면 리액트 개발자 도구에서 컴포넌트명을 확인할 수 있다.
컴포넌트 도구
- 눈 아이콘을 누르면 해당 컴포넌트가 HTML의 어디에서 렌더링됐는지 확인할 수 있다.
- 누르는 즉시 크롬 개발 도구의 메뉴 중 하나인 요소(Element) 탭으로 즉시 이동한다.
- 벌레 아이콘을 클릭하면 콘솔 탭에 해당 컴포넌트의 정보가 console.log()를 통해 기록된다.
- 소스코드 아이콘을 클릭하면 소스 코드를 확인할 수 있고, 버튼을 눌러 난독화된 코드를 볼 수 있도록 된다.
컴포넌트 hooks
- 훅에 넘겨주는 함수를 익명 함수 대신 기명 함수로 넘겨주면 해당 훅을 실행할 때 실행되는 함수의 이름을 확인할 수 있다.
- hooks도 props도 값을 더블클릭해 원하는 값으로 수정할 수 있다.

컴포넌트 메뉴가 정적인 현재 리액트 컴포넌트 트리의 내용을 디버깅하기 위한 도구라면 프로파일러는 리액트가 렌더링하는 과정에서 발생하는 상황을 확인하기 위한 도구다.
General 탭의 Highlight updates when components render: 컴포넌트가 렌더링될 때마다 해당 컴포넌트에 하이라이트를 표시한다. 이 기능은 매우 유용한 기능이므로 꼭 켜두는 것이 좋다.
Profiler 탭의 Record why each component rendered while profiling: 프로파일링 도중 무엇 때문에 컴포넌트가 렌더링됐는지 기록한다. 애플리케이션 속도가 조금 느려질 수는 있지만 디버깅에 도움이 되는 옵션이므로 켜두는 것이 좋다.
Flamegraph 탭에서는 렌더 커밋별로 어떠한 작업이 있어났는지 나타난다.