6.1 리액트 개발 도구란?
리액트 개발 도구를 브라우저 확장 도구로 설치해 리액트 애플리케이션을 디버깅하는 방법을 살펴보자.!
6.2 리액트 개발 도구 설치
우선 브라우저에 리액트 개발 도구를 브라우저 확장 도구로 설치해야 한다.
크롬, 파이어복스, 엣지 브라우저를 지원하며 개발자 본인이 주로 개발하는 브라우저에 설치하면 된다.
크롬 확장 프로그램을 설치하면 크롬 우측 상단에 잇는 확장 도구 모음에 리액트 로고가 표시된다.
리액트 로고가 회색으로 표시된다면
개발 도구가 정상적으로 접근할 수 없는 페이지이거나 리액트로 개발되지 않은 페이지라는 뜻이다.
리액트 애플리케이션을 개발 모드로 실행한 후 리액트 로고가 빨간색으로 표시된다면 정상적으로 실행된다는 뜻이다.
실제 프로덕션에 배포돼 있는 웹 애플리케이션을 방문하면 리액트 로고가 원래 고유의 색깔인 파란색으로 표시된다.
6.3 리액트 개발 도구 활용하기
리액트 개발 도구가 정상적으로 설치됐고, 디버깅할 수 있는 페이지에 접근했다면
크롬 개발자 도구에 두 가지 메뉴가 추가된 것을 확인할 수 있다.
6.3.1 컴포넌트
Components 탭에서는 현재 리액트 애플리케이션의 컴포넌트 트리를 확인할 수 있다.
단순히 컴포넌트의 구조뿐만 아니라 props와 내부 hooks 등 다양한 정보를 확인할 수 있다.
컴포넌트 트리
Components의 왼쪽 영역은 해당 리액트 페이지의 컴포넌트 트리를 나타낸다.
트리 구조로 구성되어 있고, 리액트 애플리케이션 전체의 트리 구조를 한눈에 보여준다.
기명 함수로 선언되어 컴포넌트명을 알 수 있다면 해당 컴포넌트명을 보여주고,
만약 익명 함수로 선언돼 있다면 Anonymous라는 이름으로 컴포넌트를 보여준다.
함수 선언식과 함수 표현식으로 생성한 컴포넌트는 모두 정상적으로 함수명을 표시하고 있지만,
함수 선언식 또는 표현식으로 선언되지 않은 컴포넌트는 일부 익명 함수에 대해 컴포넌트 명칭을 제대로 추론하지 못한다.
그러나 16.9 버전 이후부터는 이러한 문제가 일부 해결됐다.
동일한 코드를 16.9 버전에서 디버깅해 보면
일부 명칭을 추론할 수 없는 Anonymous가 _c3, _c5 등으로 개선된 것을 확인할 수 있다.
이전보다는 확실히 가독성이 좋아져서 어떤 컴포넌트인지 추정할 수 있는 힌트를 얻었지만
그럼에도 임의로 선언된 명칭으로는 개발 도구에서 컴포넌트를 특정하기가 어렵다.
이러한 문제를 해결하려면?
>> 컴포넌트를 기명 함수로 변경해 보자!
기명 함수로 변경 후 실행한 코드를 리액트 개발자 도구로 살펴보면
이전보다 훨씬 더 명확하게 컴포넌트 명칭을 확인할 수 있다.
만약 함수를 기명 함수로 바꾸기 어렵다면 함수에 displayName 속성을 추가하는 방법도 있다.
displayName을 설정하면 리액트 개발자 도구에서 작성한 컴포넌트명을 확인할 수 있다.
>>익명 함수로 선언하기 곤란하거나 함수명과는 별도로 특별한 명칭을 부여해 명시적으로 확인이 필요한 경우
displayName을 사용하면 좋다.
컴포넌트명과 props
왼쪽 컴포넌트 트리에서 컴포넌트를 선택했을 때 해당 컴포넌트에 대한 자세한 정보를 보여주는 영역이다.
- 컴포넌트명과 key
- 컴포넌트의 명칭과 해당 컴포넌트를 나타낸다.
- 컴포넌트 도구
- 3개의 아이콘이 있다.
- 첫 번째 눈 아이콘 : 해당 컴포넌트의 HTML의 어디에서 렌더링 됐는지 확인할 수 있다.
- 두 번째 벌레 아이콘 : 클릭 후 콘솔 탭을 확인하면 개발 도구 화면에서 보기에는 복잡한 정보를 확인하거나 해당 정보를 복사하는 용도로 사용할 수 있다.
- 세 번째 소스코드 아이콘 : 해당 컴포넌트의 소스코드를 확인할 수 있다.
- 컴포넌트 props
- 해당 컴포넌트가 받은 props를 확인할 수 있다.
- 컴포넌트 hooks
- 컴포넌트에서 사용 중인 훅 정보를 확인할 수 있다.
- State : useState, Reducer : useReducer 등으로 use가 생략된 이름으로 나타난다.
- rendered by
- 해당 컴포넌트를 렌더링 한 주체가 누구인지 확인할 수 있다.
- 개발 모드에서는 해당 컴포넌트를 렌더링한 부모 컴포넌트까지 확인할 수 있다.
6.3.2 프로파일러
리액트 애플리케이션이 렌더링 되는 과정에서 어떤 컴포넌트가 렌더링 됐는지,
몇 차례나 렌더링이 일어났으며 어떤 작업에서 오래 걸렸는지 등
컴포넌트 렌더링 과정에서 발생하는 일을 확인할 수 있다.
이 메뉴는 렌더링 과정에 개입해 디버깅에 필요한 내용을 기록해야 하기 때문에
개발 모드로 실행되는 리액트 애플리케이션을 준비해야 한다.
설정 변경하기
컴포넌트가 렌더링 될 때마다 강조 표시를 하고 싶다면 해당 옵션을 켜면 된다.
중요한 설정
- General 탭의 Highlight updates when components render
- 컴포넌트가 렌더링될 때마다 해당 컴포넌트에 하이라이트를 표시한다.
- 매우 유용하기 때문에 꼭 켜두는 것이 좋다.
- Debugging 탭의 Hide logs during second render in Strict Mode
- 리액트 애플리케이션이 엄격 모드에서 실행되는 경우 원활한 디버깅을 위해 useEffect 등이 두 번씩 작동하는 것을 막고 싶을 때.
- 프로덕션 모드에서는 해당 옵션과 관계없이 한 번씩 출력된다.
- Profiler 탭의 Record why each component rendered while profiling
- 프로파일링 도중 무엇 때문에 컴포넌트가 렌더링 됐는지 기록한다.
- 애플리케이션 속도가 조금 느려질 수 있다. 하지만 디버깅에 도움이 되는 옵션이므로 켜두는 것이 좋다.
프로파일링
- 프로파일링 메뉴
- 리액트가 렌더링 할 때 어떠한 일이 벌어지는지 확인할 수 있는 도구이다.
- 첫 번째 버튼 > Start Profiling 프로파일링 시작
- 두 번째 버튼 > Reload and Start profiling 새로고침 후 프로파일링 시작
- 세 번째 버튼 > Stop Profiling 프로파일링 종료
- Flamegraph
- 불꽃 모양의 Flamegraph 탭에서는 렌더 커밋별로 어떠한 작업이 일어났는지 나타낸다.
- 너비가 넓을수록 해당 컴포넌트를 렌더링 하는 데 오래 걸렸다는 것을 의미한다.
- 렌더링 되지 않은 컴포넌트는 회색으로 표시된다.
- Ranked
- 해당 커밋에서 렌더링 하는 데 오랜 시간이 걸린 컴포넌트를 순서대로 나열한 그래프
- Flamegraph와 다르게 렌더링이 발생한 컴포넌트만 보여준다.
타임라인
Timeline에서는 시간이 지남에 따라 컴포넌트에서 어떤 일이 일어났는지를 확인할 수 있다.
- 리액트 18 이상의 환경에서만 확인할 수 있다.
- 시간의 흐름에 따라 리액트가 작동하는 내용을 추적하는데 유용하다.
- 시간 단위로 프로파일링 기간 동안 무슨 일이 있었는지, 무엇이 렌더링 됐고, 어느 시점에 렌더링 됐는지 등등을 확인할 수 있다.
리액트 개발 도구를 활용하면 사전에 버그를 방지하고 성능을 개선할 수 있다.!
리액트 컴포넌트 구조가 복잡해지기 전에 틈틈이 리액트 개발 도구를 활용해 디버깅을 수행해 보자.
'모던 리액트 Deep Dive 스터디' 카테고리의 다른 글
| 4장 - 서버사이드 렌더링 (3) | 2024.11.28 |
|---|---|
| 크롬 개발자 도구를 활용한 애플리케이션 분석 (2) | 2024.11.23 |
| 3장 발표자료 - 리액트 훅 깊게 살펴보기 (1) | 2024.11.17 |
| 사용자 정의 훅과 고차 컴포넌트 중 무엇을 써야할까? (1) | 2024.11.16 |
| 리액트 훅 깊게 살펴보기(useReducer, useRef) (7) | 2024.11.15 |