[일기장 만들기_09] React Developer Tools

🛠 React Developer Tools 란?

크롬의 확장 프로그램으로 리액트 개발자들에게 유용한 도구를 제공한다.

---

💦 설치방법

크롬 웹스토어 - React Developer Tools 검색 - 설치

---

💦 셋팅방법

크롬 브라우저 상단 옵션 > 도구더보기 > 확장프로그램 > React Developer Tools 활성화 > 세부정보 > 사이트 액세스[모든 사이트에서]로 설정 > 파일 URL에 대한 액세스 허용 활성화(시크릿모드에서도 사용할 경우 시크릿모드 부분도 활성화 처리) > 브라우저 종료 및 재시작 > npm start시 크롬 확장에 아래 아이콘처럼 확인되면 완료!

 

---

💦 사용방법

- Components

리액트 개발시 크롬 개발자 도구의 더보기 부분에서 추가된 Components클릭하면, 만들어 둔 컴포넌트의 계층 구조를 React Developer Tools가 해석 해서 보여준다.

 

- 어떤 State를 가지고 있는지

- 어떤 Ref를 가지고 있는지

- 어떤 useEffect를 가지고 있는지

- 어떤 Props를 받았는지

- 어떤 함수를 사용하는지

- 렌더링한 리스트의 key값도 알려준다.

 

💡 컴포넌트의 계층 구조와 각각의 Data/Props/State 등등 어떤것을 가지고 있는지 확인할 때 유용하게 사용 된다.

---

- Components(View settings)

Components의 설정에서 Highlight updates when components render 부분을 체크 해주면 현재 브라우저에서 리렌더가 되는 부분을 색상이 있는 테두리로 표시해서 알려준다. (리렌더가 일어날 수록 연하늘색에서 진한 노란색으로 변함)