docs: 6장 서준환 (#50)

6장/서준환.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, ,