우리가 리액트를 개발할때 크롬 사이트에서 개발자도구를 볼때 이 React Developer Tools를 설치하면 디버깅과 성능 최적화에 있어서 효율적으로 업무를 수행할수있도록 하는 다양한 기능을 지원하기때문에 버그를 더 빠르게 찾거나 성능 분석함으로서 작업효율에 굉장한 도움이 된다.
💡 React Developer Tools 설치
https://chromewebstore.google.com/
크롬 웹스토어에서 설치가 가능한데 설치하고나면 개발자도구에 새로운 탭이 생긴다. (Components와 Profiler 탭)
Components 탭에서는 우리가 개발중인 리액트사이트를 컴포넌트로 미리볼수가 있다.
왼쪽에서는 컴포넌트 구조를 파악할수있고 아이콘을 클릭해 컴포넌트를 찍어보면 그안의 state, props와 같은 것들이 조회되고 수정또한 가능하다.
그리고 Profiler 탭에서 성능평가까지 가능하다.
Profiler 탭에 들어가서
- 녹화버튼을 누르고
- 페이지 이동이나 버튼조작
- 녹화를 끝내고나면
방금 렌더링 된 모든 컴포넌트의 렌더링시간이 측정된다.
💡 Redux Developer Tools
이외에도 Redux Developer Tools 도 크롬 웹스토어에서 설치가능하다.
Redux store에 있던 state를 전부 확인가능하다.
그리고 dispatch 날릴 때 마다 뭐가 어떻게 바뀌었는지 로그를 작성해주기때문에.
store 복잡해지면 유용하다.
,