From a6233715d6df2bcddc549496b71b5f964e1f1787 Mon Sep 17 00:00:00 2001
From: Junhwan <seojunhwan@kakao.com>
Date: Sat, 3 Feb 2024 00:18:32 +0900
Subject: [PATCH] =?UTF-8?q?docs:=206=EC=9E=A5=20=EC=84=9C=EC=A4=80?=
 =?UTF-8?q?=ED=99=98=20(#50)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../\354\204\234\354\244\200\355\231\230.md"  | 50 +++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 "6\354\236\245/\354\204\234\354\244\200\355\231\230.md"

diff --git "a/6\354\236\245/\354\204\234\354\244\200\355\231\230.md" "b/6\354\236\245/\354\204\234\354\244\200\355\231\230.md"
new file mode 100644
index 0000000..3929473
--- /dev/null
+++ "b/6\354\236\245/\354\204\234\354\244\200\355\231\230.md"
@@ -0,0 +1,50 @@
+# 6장 리액트 개발 도구로 디버깅하기
+
+## 6.1 리액트 개발자 도구
+
+리액트를 사용한 곳이라면 어디든 동작한다! (리액트 네이티브 포함)
+
+## 6.3 리액트 개발 도구 활용하기
+
+### 6.3.1 컴포넌트
+
+정적인 내용 분석 / 디버깅하기
+
+#### 컴포넌트 트리
+
+리액트 애플리케이션 전체의 트리 구조를 나타냄
+
+기명 함수로 선언되어 컴포넌트명을 알 수 있다면 해당 컴포넌트 명을 보여주고, 아니라면 `Anonymous`로 보여진다.
+> 이러한 부분에 익명 함수로 사용하면 안 된다는 것을 알 수 있다. ex) useEffect, useCallback, forwardRef 등
+
+#### 컴포넌트명과 props
+
+p.410 확인
+
+컴포넌트 도구 아이콘 역할
+
+- 눈 : HTML 위치로 이동
+- 벌레 : 해당 컴포넌트가 주입받는 props, 사용하는 hooks,  HTML 요소를 확인할 수 있다.
+- 소스코드 : 소스코드 확인
+
+
+### 6.3.2 프로파일러
+
+렌더링 하는 과정을 분석 / 디버깅하기
+
+> 프로덕션 빌드에선 사용 불가
+
+#### 설정 변경하기
+
+General > Highlight updates when components render : 컴포넌트가 렌더링 될 때마다 하이라이트를 표시한다.
+
+Debugging > Hide logs during second render in Strict Mode : Strict 모드에서 두 번째 렌더링 시 로그를 숨긴다.
+
+Profiler > Record why each component rendered while profiling : 프로파일링 중에 각 컴포넌트가 렌더링된 이유를 기록한다.
+
+
+# 마무리
+
+책을 한번 더 보는 것이 좋을 것 같다.
+
+꽤나 유용하지만 사용한 적 없는 것들을 다루고 있었다. 특히 profiler, ,
\ No newline at end of file