React dev tools
크롬 브라우저에서 추가할 수 있는 몇가지 React 도구들을 소개한다
React Developer Tools
출처 : 코딩애플
기존 개발자도구의 elements 탭은 html 형식으로 태그를 표현하지만
저걸 사용하면 React의 Component 단위로 표현을 해줌은 물론이요 state, props 조회도 가능하다. 그래서 React로 웹 디버깅을 할때 유용하다
Profiler 탭
출처 : 코딩애플
녹화버튼 누르고
조작하고
녹화 끝내면
방금 렌더링된 모든 컴포넌트의 렌더링 시간을 측정해준다.
뭐 이상하게 어디서 느린거 같다 이러면 그걸 측정해보면 범인을 찾을 수 있다.
근데 보통 원인은 대부분 서버에서 요청결과가 늦게 도착하는게 다임. 그건 뭐 어쩔 수 없음
Redux Developer Tools
Redux dev tools를 사용하면 저렇게 payload나 store에 보관된 state들을 다 알 수 있다. 관리할 상태가 많아지면 아주 유용하다
