정리하기 파일

06장. 리액트 개발 도구로 디버깅하기

6.1 리액트 개발 도구란?

react-dev-tools 는 리액트로 만들어진 다양한 애플리케이션을 디버깅하기 위해 만들어졌으며, 리액트 웹 뿐만 아니라 리액트 네이트부 등 다양한 플랫폼에서 사용할 수 있다. 가장 편리한 방법은 브라우저 확장 프로그램을 사용하는 것이다.

6.2 리액트 개발 도구 설치

브라우저 확장 도구로 설치하고 나면 리액트 로고의 색을 통해 구분할 수 있다.

회색 : 리액트 개발 도구가 정상적으로 접근할 수 없는 페이지. 리액트로 개발되지 않은 페이지
빨간색 : 개발 모드인 리액트 웹 애플리케이션에 정상적으로 리액트 개발 도구가 접근할 수 있다는 의미
파란색 : 실제 프로덕션에 배포돼 있는 웹 애플리케이션을 방문할 경우

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

6.3.1 컴포넌트

정적인 현재 리애트 컴포넌트 트리의 내용을 디버깅하기 위한 도구

📍 컴포넌트 트리

components 탭에서는 현재 리액트 애플리케이션의 컴포넌트 트리를 확인할 수 있다. 컴포넌트의 구조뿐만 아니라 props와 내부 hooks 등 다양한 정보를 확인할 수 있다.

기명 함수로 선언되어 있으면 해당 컴포넌트명을 보여주고, 익명 함수로 선언돼 있으면 Anonymous라는 이름으로 컴포넌트를 보여준다.

16.9 버전 이후부터는 일부 Anonymous가 _c3, _c5 등으로 개선된 것을 확인할 수 있다. 그럼에도 이러한 임의로 선언된 명칭으로는 개발 도구에서 컴포넌트를 특정하기는 어렵다. 이러한 문제를 해결하기 위해 컴포넌트를 기명 함수로 변경할 수 있다.

만약 함수를 기명 함수로 바꾸기 어렵다면 함수에 displayName 속성을 추가하는 방법도 있다. 고차 컴포넌트의 경우 이러한 기법을 유용하게 사용할 수 있다.

const MemoizedComponent = memo(function () {
	return <>MemoizedComponent</>
})
 
MemoizedComponent.displayName = '메모 컴포넌트입니다.'

물론 빌드한 트리를 확인하는 경우 기명 함수로 선언한다 하더라도 압축 도구 등이 난수화하기 때문에 확인하기가 어려워진다. 그러므로 displayName 과 함수명은 개발 모드에서만 제한적으로 참고하는 것이 좋다.

컴포넌트명과 props

컴포넌트 명칭 : Anonymous (익명 함수)
key : kidsValueProp
빨간색 경고 표시 : 해당 애플리케이션이 strict mode로 렌더링되지 않았다는 것을 의미

컴포넌트 도구

첫 번째 눈 아이콘 : Element 탭으로 이동하며, 해당 컴포넌트가 렌더링한 HTML 요소가 선택된다.
두 번째 벌레 아이콘 : console 탭에 해당 컴포넌트의 정보가 기록된다. 해당 컴포넌트가 받는 props, 컴포넌트 내부에서 사용하는 hooks, 컴포넌트의 HTML 요소인 nodes가 기록된다.
세 번째 소스코드 아이콘 : 해당 컴포넌트의 소스코드를 확인할 수 있다.

컴포넌트 props

해당 컴포넌트가 받은 props를 확인할 수 있다. 원시값뿐만 아니라 함수도 포함돼 있다.

컴포넌트 hooks

컴포넌트에서 사용 중인 훅 정보를 확인할 수 있다. useState는 State와 같이 use가 생략된 이름으로 나타난다.

컴포넌트를 렌더링한 주체, rendered by

rendered by는 해당 컴포넌트를 렌더링한 주체가 누구인지 확인할 수 있다.
프로덕션 모드에서는 react-dom의 버전만 확인할 수 있지만 개발 모드에서는 해당 컴포넌트를 렌더링한 부모 컴포넌트까지 확인할 수 있다.

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 : 프로파일링 도중 무엇 때문에 컴포넌트가 렌더링 됐는지 기록한다.

Flamegraph

불꽃 모양의 아이콘 탭에서는 렌더 커밋별로 어떠한 작업이 일어났는지 나타낸다. 이 메뉴는 비단 컴포넌트가 렌더링이 얼마나 걸렸는지 확인할 수 있을뿐더러 렌더링되지 않은 컴포넌트에 대한 정보도 확인할 수 있다.

Ranked

해당 커밋에서 렌더링하는 데 오랜 시간이 걸린 컴포넌트를 순서대로 나열한 그래프다. Flamegraph와의 차이점은 모든 컴포넌트를 보여주는 것이 아니라 단순히 렌더링이 발생한 컴포넌트만 보여준다.

Timeline

시간이 지남에 따라 컴포넌트에서 어떤 일이 일어났는지를 확인할 수 있다. 리액트 18 이상의 환경에서만 확인할 수 있다.

07장. 크롬 개발자 도구를 활용한 애플리케이션 분석

자바스크립트 메모리, 네트워크, 소스, 실제 HTML 및 CSS 등 리액트가 아닌 일반적인 웹 애플리케이션 환경의 디버깅을 수행하려면 리액트 개발 도구가 아닌 브라우저 개발자 도구를 활용해야 한다.

7.1 크롬 개발자 도구란?

크롬 개발자 도구에서 웹사이트를 제대로 디버깅하고 싶다면 개인정보 보호 모드(시크릿 모드)에서 개발자 도구를 여는 것을 권장한다. 이유는 브라우저에 설치돼 있는 각종 확장 프로그램 때문이다.

7.2 요소 탭

현재 웹페이지를 구성하고 있는 HTML, CSS 등의 정보를 확인할 수 있다.

7.3 소스 탭

웹 애플리케이션을 불러오기 위해 실행하거나 참조된 모든 파일을 확인할 수 있다.

스코프, 호출 스택 등 현재 자바스크립트가 실행되고 있는 구조도 확인할 수 있다.

감시 : 감시하고 싶은 변수를 선언하고, 해당 변수의 정보를 확인할 수 있는 메뉴다.
중단점 : 현재 웹사이트에서 추가한 중단점을 확인할 수 있다.
범위 : 현재 중단점에서의 스코프를 의미한다.
호출 스택 : 현재 중단점의 콜스택을 확인할 수 있다.
전역 리스너 : 현재 전역 스코프에 추가된 리스너 목록을 확인할 수 있다.
XHR/가져오기, DOM, 이벤트 리스너, CSP 위반 중단점 : 소스의 중단점 이외에 다양한 중단점을 확인할 수 있다.

7.4 네트워크 탭

해당 웹페이지를 접속하는 순간부터 발생하는 모든 네트워크 관련 작동이 기록된다. 웹사이트에서 자주 사용하는 HTTP 요청부터 웹 소켓에 이르기까지, 웹페이지가 외부 데이터와 통신하는 정보를 확인할 수 있다.

불필요한 요청 또는 중복되는 요청이 없는지
웹페이지 구성에 필요한 리소스 크기가 너무 크지 않은지
리소스를 불러오는 속도는 적절한지 / 너무 오래 걸리는 리소스는 없는지
리소스가 올바른 우선순위로 다운로드되어 페이지를 자연스럽게 만들어가는지

7.5 메모리 탭

현재 웹페이지가 차지하고 있는 메모리 관련 정보를 확인할 수 있다. 애플리케이션에서 발생하는 메모리 누수, 속도 저하, 웹페이지 프리징 현상을 확인할 수 있는 유용한 도구다.

힙 스냅샷

현재 메모리 상황을 사진 찍듯이 촬영할 수 있다.
스냅샷을 활용할 때는 의심이 되는 지점을 먼저 추측해 본 뒤에 두 개 이상의 스냅샷을 보는 것이 훨씬 쉽다.

타임라인의 할당 계측

현재 시점의 메모리 상황이 아닌, 시간의 흐름에 따라 메모리 변화를 살펴보고 싶다면 타임라인의 할당 계측을 사용하면 된다.
주로 로딩이 되는 과정의 메모리 변화 또는 페이지에서 어떠한 상호작용을 했을 때 메모리의 변화 과정을 알고 싶을 때 사용한다.

할당 샘플링

메모리 공간을 차지하고 있는 자바스크립트 함수를 볼 수 있다.

About About