📌 React Developer Tools
☑️ React Developer Tools(RDT) 활용하기
크롬 > 확장 프로그램 검색 > React Developer Tools(RDT) > 확장프로그램에 추가
☑️ 기본 설정
☑️ 개발중인 프로젝트에서 확인하기
- 크롬에 추가 시 이렇게 나옴
- 개발자도구(F12)를 열어서 RDT Component 확인
- 설정에서 Highlight updates when components render 체크하면 컴포넌트가 렌더중일 때 노란색/청록색 테두리 표시가 나타남
- 일기 컴포넌트를 수정하면 hooks의 state가 바뀌는 것을 확인할 수 있음
- 분명히 Props를 줬는데 왜 없다 그러지? State가 바뀌는 걸 어떻게 확인하지? 이런 것들을 해결할 때 도움됨
'React > React 공부' 카테고리의 다른 글
| 일기장 만들기 (10) - 최적화2 (컴포넌트 재사용) : React.memo (0) | 2023.02.11 |
|---|---|
| 일기장 만들기 (9) - 최적화1 (연산결과 재사용) : useMemo (0) | 2023.02.11 |
| 일기장 만들기 (9) API 호출하기 : useEffect x fetch (0) | 2023.02.11 |
| Lifecycle 제어 : useEffect (0) | 2023.02.11 |
| React 기본 - 일기장 만들기(6) [CRUD : UPDATE] (0) | 2023.02.09 |
