리액트 앱 성능 개선하기 (리액트 확장 프로그램 추가)

 

- 다운로드 받기

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko&

 

 

 

 

 

● 익스텐션을 이용해서 렌더링 되는 부분 표시하기

Components 탭에서 Highligh updates 부분을 체크해주면 쉽게 컴포넌트가 렌더링 되는 것을 볼 수 있다.

(Components 탭에서 톱니바퀴 눌러서 설정)

 

체크 박스 선택

 

 

 

이렇게 설정하면 어떤 컴포넌트(틱택토의 칸)가 클릭 되었는지 알 수 있도록 해당 선택부분에 하이라이트 표시가 된다.

 

 

 

또한, Chrome과 Firefox의 React Devtools 확장 프로그램을 사용하면 브라우저 개발자 도구에서 React 컴포넌트 트리를 검사할 수 있다.

 

- Components에서 확인

구성 요소 탭에는 페이지에서 렌더링된 루트 React 구성 요소와 렌더링을 마친 하위 구성 요소가 표시된다.

 

 

 

 

 

- Profiler 탭에서는 성능 정보를 기록할 수 있다.