[리액트] 리액트 필수 크롬 확장 프로그램 (react developer tool)

변화가 없는 컴포넌트가 렌더링 된다면 낭비가 발생하게 된다.

그래서 렌더링이 언제 발생하는지를 알아두고 최대한 낭비를 막는 게 중요하다.

 

참고) 렌더링이 일어나는 시점은

- state나 props가 변경될 때

- 부모 컴포넌트가 변경될 때

- forceUpdate()가 호출될 때이다.

 

 

렌더링을 우리 눈으로 직접 확인하기 위해서는 크롬 익스텐션인 react developer tool이 필요하다

Chrome 웹 스토어

 

 

설치했다면, 다음 과정을 따라해주면 된다. (아주 간단!!)

개발자 도구를 열어보면 Components 탭이 새로 생겼다!!

탭에 들어가서 톱니바퀴를 클릭해준다.

 

General에 있는 'Highlight updates when components render' 체크박스를 클릭해준다.

 

 

 

좋아요 버튼을 누를 때마다 즉, 리렌더링 될 때마다 하늘색-초록색-노란색-빨간색 순으로 표시해준다!!

글 드래그했을 때 나타나는 파란색 블럭말고 밑에 나타나는 선을 보면 된다!!