React Basic - 15 . React Devtools

크롬 확장 devtools

크롬 확장 프로그램 중 react dev tools를 설치해주면 f12를 통해 개발자 도구를 확인할 때 Coponent에서 state의 값들을 확인할 수 있다.

이를 통해서 디버깅을 쉽게 할 수 있다.

랜더

state나 props가 바뀔 때마다 랜더가 다시 이루어진다. 리액트 데브 툴의 톱니바퀴에서 highlight 설정을 하면 랜더링이 이루어지는 곳을 확인할 수 있다.
만약 원하는 곳이 아닌 곳에서 랜더링이 이루어지면 프로그램에 부하를 주게 되므로 좋지 않다고 할 수 있다.
또한 state가 바뀌지 않더라도 setState가 호출되기만 해도 새롭게 랜더링이 된다.