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

6장/권오연.md

@@ -0,0 +1,38 @@
+# 6장. 리액트 개발 도구로 디버깅하기
+
+## 6.1 리액트 개발 도구란?
+
+- react-dev-tools
+
+## 6.2 리액트 개발 도구 설치
+
+- 확장 프로그램으로 설치
+
+## 6.3 리액트 개발 도구 활용하기
+
+- 개발자 도구에 Components와 Profiler가 추가됨
+
+### 6.3.1 컴포넌트
+
+- 리액트 앱의 컴포넌트 트리 확인
+- 컴포넌트의 구조뿐만 아니라 props와 내부 hooks등 다양한 정보 확인
+- 컴포넌트 트리
+  - 트리 구조
+  - 함수 선언식과 함수 표현식으로 작성된 컴포넌트는 트리에 컴포넌트명이 표시된다.
+  - memo로 익명 함수 컴포넌트를 감싸거나 고차 컴포넌트로 감싼 컴포넌트는 컴포넌트명이 표시되지 않는다.
+  - 그런 경우에는 `Component.displayName = '어떤 컴포넌트'` 로 작성하는 방법이 있다.
+- 컴포넌트명과 props, rendered by
+  - 눈 모양 아이콘 → Elements 탭으로 이동
+  - 벌레 모양 아이콘 → Console 탭에 해당 컴포넌트가 찍힘
+  - {} 모양 아이콘 → Source 탭으로 이동
+
+## 6.3.2 프로파일러
+
+- 리액트의 렌더링 과정에서 어떤 컴포넌트가 렌더링됐는지, 또 몇 차례나 렌더링이 일어났으며 어떤 작업에서 오래 걸렸는지 등 추적
+- 첫번째 동그라미는 프로파일링 시작 버튼
+- 두번째 동그란 화살표는 새로고침 후 프로파일링 시작버튼
+- 세번째 금지 표시는 프로파일링 종료 및 삭제
+- 네번째 다섯번째는 불러오기, 저장하기
+- 여섯번째 불꽃 모양은 렌더 커밋별로 어떤 작업이 일어났는지 기록, 어떤 컴포넌트가 렌더링이 되었는지, 얼마나 오래 걸렸는지 측정 가능
+- 일곱번째 차트 아이콘은 렌더링 시간이 가장 오래걸린 컴포넌트를 순서대로 나열
+- 여덟번째 달력 아이콘은 타임라인으로 시간이 지남에 따라 컴포넌트에서 어떤 일이 일어났는지 확인