From 281060c44f58f1321c670c106c4a9b503e42f149 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B6=8C=EC=98=A4=EC=97=B0?=
 <61301574+oyeon-kwon@users.noreply.github.com>
Date: Sat, 3 Feb 2024 00:19:44 +0900
Subject: [PATCH] =?UTF-8?q?[6=EC=9E=A5]=20=EB=A6=AC=EC=95=A1=ED=8A=B8=20?=
 =?UTF-8?q?=EA=B0=9C=EB=B0=9C=20=EB=8F=84=EA=B5=AC=EB=A1=9C=20=EB=94=94?=
 =?UTF-8?q?=EB=B2=84=EA=B9=85=ED=95=98=EA=B8=B0=20(#56)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../\352\266\214\354\230\244\354\227\260.md"  | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 "6\354\236\245/\352\266\214\354\230\244\354\227\260.md"

diff --git "a/6\354\236\245/\352\266\214\354\230\244\354\227\260.md" "b/6\354\236\245/\352\266\214\354\230\244\354\227\260.md"
new file mode 100644
index 0000000..432b48b
--- /dev/null
+++ "b/6\354\236\245/\352\266\214\354\230\244\354\227\260.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 프로파일러
+
+- 리액트의 렌더링 과정에서 어떤 컴포넌트가 렌더링됐는지, 또 몇 차례나 렌더링이 일어났으며 어떤 작업에서 오래 걸렸는지 등 추적
+- 첫번째 동그라미는 프로파일링 시작 버튼
+- 두번째 동그란 화살표는 새로고침 후 프로파일링 시작버튼
+- 세번째 금지 표시는 프로파일링 종료 및 삭제
+- 네번째 다섯번째는 불러오기, 저장하기
+- 여섯번째 불꽃 모양은 렌더 커밋별로 어떤 작업이 일어났는지 기록, 어떤 컴포넌트가 렌더링이 되었는지, 얼마나 오래 걸렸는지 측정 가능
+- 일곱번째 차트 아이콘은 렌더링 시간이 가장 오래걸린 컴포넌트를 순서대로 나열
+- 여덟번째 달력 아이콘은 타임라인으로 시간이 지남에 따라 컴포넌트에서 어떤 일이 일어났는지 확인