6.1 리액트 개발도구란?
리액트 팀에서 제공하는 리액트 애플리케이션의 원활한 개발을 위한 개발 도구이다.
브라우저의 확장 프로그램을 사용하는 방법이 있다.
6.2 리액트 개발 도구 설치
크롬, 파이어폭스, 마이크로소프트엣지 각각의 링크로 들어가 다운받으면 된다.
6.3 리액트 개발 도구 활용하기
6.3.1 컴포넌트
컴포넌트 트리구조를 한눈에 보여준다.
함수 선언식과 표현식으로 선언되지 않은 컴포넌트는 익명으로 나오게 된다.
그러니 함수 선언식과 표현식으로 꼭 작성하도록 하자.
기명함수로 변경이 어렵다면 displayName 속성을 추가할 수 있다.
컴포넌트 명과 key
컴포넌트 도구
컴포넌트 props
해당 컴포넌트가 받은 props를 확인할 수 있다.
컴포넌트 hooks
컴포넌트에서 사용 중인 훅 정보를 확인할 수 있다.
rendered by
해당 컴포넌트를 렌더링한 주체가 누구인지 알 수 있다.
6.3.2 프로파일러
리액트가 렌더링하는 과정에서 발생하는 상황을 확인하기 위한 도구다.
프로파일링
프로파일링 메뉴는 리액트가 렌더링할 때 어떠한 일이 벌어지는지 확인할 수 있는 도구
Flamegraph
렌더 커밋별로 어떠한 작업이 일어났는지 나타낸다.
Ranked
해당 커밋에서 렌더링하는 데 오랜 시간이 걸린 컴포넌트를 순서대로 나열한 그래프
타임라인
시간이 지남에 따라 컴포넌트에서 어떤 일이 일어났는지 확인 가능
정리
실습이 전부였지만 매우 유용한 단원이었다.
해당 지식을 사용해 개발과정에서 효율적인 코드를 작성하려 할 것 같다.
Share article