리액트 관련 도구 [React Developer Tools]

구글 크롬에서는 리액트에 관련한 툴 프로그램이 있습니다. 

프로그램 이름은 React Developer Tools입니다. 

이 프로그램은 페이스북에서 제작을 하였고 크롬 웹 스토어에서 검색하여 설치 후 사용이 가능합니다.

 

크롬 웹스토어에서 검색한 React Developer Tools 

바로가기 : chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

React Developer Tools

 

설치 완료 후 개발자도구를 보면 기능이 추가됨을 알 수 있습니다.

설치 후 개발자도구로 본 주요 기능

React Developer Tools에는 profiler와 components탭이 있습니다.

profiler는 react 컴포넌트의 성능을 측정하기 위해 쓰이며 주요 기능인 Framegraph(프레임그래프), Ranked(순위), Interactions(상호작용)가 있습니다. 

파란색 레코드 버튼을 클릭하면 프로파일링이 시작됩니다.

 

프로파일링을 시작 후 측정한 프레임그래프

 

프로파일링 후 리액트 웹 렌더링 순위

우측의 Commit information은 리액트 웹에 대한 커밋의 정보를 나타냅니다.

Priority(우선 사항)/Committed at(커밋이 행해진)/Render duration(렌더 지속기간)/Interactions(상호작용)을 의미하며

 

현재 페이지의 커밋 정보를 요약해보면

[우선사항은 즉각적이며 6.3초에 커밋이 행해졌으며 0.8ms의 렌더 지속이 적용되었다. 상호작용은 없음이다.]로 볼 수 있겠습니다.