리액트 개발 도구로 디버깅하기
리액트 개발 도구란?
리액트 팀은 애플리케이션의 원활한 개발을 돕기 위해 react-dev-tools라는 도구를 제공합니다. 이는 브라우저 확장 프로그램으로 사용할 수 있습니다.
리액트 개발 도구 설치
해당 링크를 통해 크롬에서 다운로드 할 수 있습니다.
개발자 도구를 사용할 수 있는 상태에서는 확장 프로그램 아이콘이 파란색으로, 비활성화 상태일 경우에는 회색으로 표시됩니다.
리액트 개발 도구 활용하기
개발 도구를 설치하면 Components와 Profiler 탭이 추가된 것을 확인할 수 있습니다.
컴포넌트
Components 에서는 현재 리액트 애플리케이션의 컴포넌트 트리를 확인할 수 있습니다. 단순한 컴포넌트 구조뿐만 아니라 props, 내부 hooks 등 다양한 정보를 볼 수 있습니다.
기명 함수로 선언된 컴포넌트는 함수 이름으로 볼 수 있지만, 익명 함수로 선언된 경우 "Anonymous"로 표시됩니다.
React.memo나 고차 컴포넌트(HOC)로 감싸진 컴포넌트도 초기에는 "Anonymous"로 표시되지만, 이후 _c3, _c5와 같은 임시 컴포넌트 이름으로 개선되었습니다. 디버깅을 위해 컴포넌트에 displayName 속성을 추가하는 것이 좋습니다.
컴포넌트 도구
눈 아이콘 컴포넌트가 HTML 내에서 어디에 렌더링되었는지 확인할 수 있습니다.
벌레 아이콘 복잡한 정보를 확인하거나 복사하는 데 사용할 수 있습니다.
소스코드 아이콘 컴포넌트의 소스 코드를 확인할 수 있습니다. 소스가 압축되어 있을 경우,
{}아이콘을 눌러 가독성을 높일 수 있습니다.
컴포넌트 props
컴포넌트가 받은 props를 확인할 수 있습니다. 단순한 원시값뿐만 아니라 함수도 볼 수 있으며, props 정보를 복사할 수도 있습니다.
컴포넌트 hooks
컴포넌트에서 사용 중인 훅 정보를 확인할 수 있습니다. useState와 같은 훅의 경우 "State"로 표시되며, use 접두어는 생략됩니다.
rendered by
해당 컴포넌트를 렌더링한 주체(예: 부모 컴포넌트)를 확인할 수 있습니다.
프로파일러
Profiler는 렌더링 과정에서 발생하는 상황을 확인하기 위한 도구입니다. 어떤 컴포넌트가 렌더링되었는지, 몇 차례나 렌더링이 발생했는지 등을 확인할 수 있습니다.
프로파일링
렌더링할 때 어떠한일이 벌어지는지 확인할 수 있는 도구입니다.
첫 번째 버튼을 누르면 프로파일링이 시작됩니다. 다시 누르면 프로파일링이 중단되고 결과가 표시됩니다.
두 번째 버튼은 새로고침 후 프로파일링을 시작합니다. 첫 번째 버튼과 달리 웹 페이지가 새로고침된 후 프로파일링을 시작합니다.
세 번째 버튼은 프로파일링을 종료하고 현재 내용을 모두 지웁니다.
네 번째와 다섯 번째 버튼은 각각 불러오기와 저장하기 기능입니다. 저장 시 JSON 파일로 저장되며, 해당 파일을 불러올 수 있습니다.
Flamegraph
불꽃 모양의 아이콘을 통해 렌더 커밋별로 어떤 작업이 일어났는지 확인할 수 있습니다. 그래프의 너비가 넓을수록 렌더링 시간이 길다는 것을 의미합니다.
Ranked
해당 커밋에서 렌더링하는 데 시간이 오래 걸린 컴포넌트를 순서대로 나열한 그래프입니다. Flamegraph와 다른 점은 렌더링이 발생한 컴포넌트만을 보여준다는 점입니다.
타임라인
시간의 흐름에 따라 컴포넌트에서 어떤 일이 발생했는지 확인할 수 있습니다.