#9. [React] 개발자 도구

설치

1. 각 브라우저 스토어에서 React Developer Tools를 설치합니다.

   항목	내용
   크롬	https://chromewebstore.google.com/detail/fmkadmapgofadopljbjfkapdkoienihi
   엣지	https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil

2. 리액트를 사용하는 페이지를 연후 F12를 눌러 개발자 도구를 표시한뒤 메뉴 우측의 탭 더보기를 클릭하여 Components나 Profiler를 선택합니다.

Components

Components를 이용하면 리액트 컴포넌트들을 탐색하고, Props 나 State를 수정할 수 있습니다.

1. 선택된 항목은 하일라이트되어 표시됩니다.

   

2. 우측 속성창에서 Props 나 State를 클릭하여 수정후 포커스를 빼면 수정된 값으로 반영되어 렌더링됩니다.

   

Profiler

Components를 이용하면 리엑트 컴포넌트들의 렌더링 속도를 측정할 수 있습니다.

1. 좌측 상단의 파란 점 모양 버튼을 클릭하여 레코딩을 시작합니다.

   

2. 이것 저것 실행해 보고 좌측 상단의 빨간 점 모양 버튼을 클릭하여 레코딩을 종료합니다.

   

3. 그러면 다음과 같은 보고서가 표시됩니다. 상단의 페이지를 이동하여 각 타임라인을 이동할 수 있으며, 마우스를 over하면 간략한 툴팁으로 세부 정보를 보여줍니다.

   

4. 클릭시에는 실행 속도 이력을 보여줍니다.