Chrome 웹 스토어 들어가서 react developer tools 설치!

React Developer Tools

해당 확장자에 상세보기 가서 아래와 같이 설정

Untitled

그러면 개발자 도구에서 >> 를 클릭하면 Components와 Profiler 탭이 추가된 걸 볼 수 있으며

Components에서 내가 만든 Components에 대한 정보가 깔끔하게 나와있음!

Untitled

설정 클릭!

Untitled

Highlight 체크해주면

Untitled

무언가 수정할 때 rerender가 되므로 그럴때마다 해당 component 색이 변하는것을 확인할 수 있다

→ rerender 되는 컴포넌트의 색을 변화 시킴

Untitled