[리액트 딥다이브] 6 리액트 개발 도구로 디버깅하기

6.1 리액트 개발 도구란?

리액트 애플리케이션 디버깅을 위한 리액트 개발 도구 react-dev-tools

 

6.2 리액트 개발 도구 설치

사용 방법은 여러가지가 있지만 웹 개발에서는 확장 프로그램을 사용하는 것이 가장 편리

- 크롬

- 파이어폭스

- 엣지

 

리액트 개발 도구가 정상적으로 접근할 수 없는 페이지인 경우, 리액트로 개발된 페이지가 아닌 경우

리액트 개발 도구가 정상적으로 접근할 수 있는 경우

 

6.3 리액트 개발 도구 활용하기

6.3.1 Components

컴포넌트 트리, 컴포넌트에 대한 자세한 정보(props, hooks 등)

 

컴포넌트명(압축 도구로 인해 난수화될 수 있어 개발 모드에서 제한적으로 참고)

익명 함수인 경우 Anonymous, _default, _c3, _c5 등 컴포넌트 특정이 어려움

- 기명 함수 사용

- displayName 속성 추가

 

컴포넌트 도구

- 눈 아이콘: 해당 컴포넌트가 강조된 요소 탭으로 전환됨

- 디버그 아이콘: 콘솔 탭에 해당 컴포넌트 정보(props, hooks, nodes)가 출력됨

- 코드 아이콘: 소스 탭에서 소스코드 확인(난독화)

 

props

Copy Value to clipboard

Store as global variable(window.$r에 저장)

Go to definition(props가 함수인 경우 해당 코드로 이동)

 

hooks

use가 생략된 이름으로 나타남

 

rendered by

렌더링 주체

프로덕션 모드: react-dom 버전

개발 모드: react-dom 버전, 부모 컴포넌트

 

6.3.2 Profiler

개발 모드에서만 사용 가능

렌더링 과정에서 발생하는 상황을 확인하기 위한 도구

- 렌더링된 컴포넌트, 렌더링 횟수, 렌더링 속도

 

설정

General - Highlight updates when components render

: 렌더링될 때마다 해당 컴포넌트를 하이라이트

Debugging - Hide logs during second render in Strict Mode

: 엄격 모드에서 실행되는 경우 useEffect가 두 번씩 동작하는데 이를 막아줌

Profiler - Record why each component rendered while profilling

: 프로파일링 중에 컴포넌트가 렌더링된 이유 기록

 

프로파일링

1. 프로파일링 시작/중단

2. 새로고침 후 프로파일링 시작

3. 프로파일링 종료(삭제)

4. 프로파일 불러오기

5. 프로파일 저장하기(JSON)

6. Flamegraph

그래프 영역은 컴포넌트 트리와 유사

렌더링되지 않은 컴포넌트는 회색으로 표시(메모이제이션, 렌더링이 의도한대로 제한적으로 발생하고 있는지 확인)

녹색일수록 렌더링이 빠르고 노란색에 가까울수록 렌더링 시간이 오래걸림

7. Ranked

렌더링이 오래걸린 순으로 나열한 그래프

8. 타임라인