리액트 팀이 리액트 애플리케이션의 원활한 개발을 위한 개발 도구를 만들어 제공하고 있다
react-dev-tools
가장 편리하게 사용하는 방법은 브라우저 확장 도구로 설치하는 것
아이콘이 회색이라면 리액트 개발 도구가 접근할 수 없거나
리액트로 개발된 페이지가 아니라는 뜻
사용할 수 있는 페이지에 접근하면 개발자 도구에
Components 와 Profiler 두 가지 탭이 추가된다
Components
Components 탭에서는 리액트 애플리케이션의 컴포넌트 트리를 확인할 수 있고 컴포넌트 구조 뿐 아니라
props 와 hooks 등 다양한 정보를 확인할 수 있다
기명함수로 작성되어 있으면 해당 컴포넌트명을 보여주고
익명함수로 선언되어 있다면 Anonymous 로 표시된다
함수 선언식과 표현식 모두 정상적으로 함수명을 포함하고 있다
memo 와 고차 컴포넌트 이름은 제대로 추론하지 못한다
16.9 버전 이후로는 일부 이러한 문제가 해결되었다
Anonymous 로 추론되던 이름이 _c3 _c5 등으로 개선되었다
추론하지 못하는 컴포넌트의 경우 dispalyName 을 추가하면 개발자 도구에서 확인할 수 있다
const MemorizedComponent = memo(
function() {
return <>memorized component</>
}
)
MemorizedComponent.displayName = '메모 컴포넌트'고차 컴포넌트의 경우에도 사용할 수 있다
컴포넌트 명과 props
빨간 경고 이모티콘이 뜬다면 strict mode 로 렌더링되지 않았다는 것
첫 번째 눈 아이콘을 누르면 컴포넌트가 HTML 의 어디에서 렌더링 되었는지 확인할 수 있다
두 번째 아이콘은 console.log 를 통해 해당 컴포넌트의 정보가 기록된다
세 번째 아이콘을 클릭하면 해당 컴포넌트의 소스코드를 볼 수 있고
기본적으로는 빌드 시 압축된 코드를 보여준다
props 에는 원시값 뿐만 아니라 함수도 포함되어 있다
컴포넌트 hooks
hooks 의 이름은 use 가 생략된 채로 표시된다
use 가 생략되지 않은 훅은 사용자 정의 훅
useEffect 등 콜백함수를 기명함수로 작성하면
해당 콜백 함수의 이름을 보여준다
rendered by
rendered by 에서는 해당 컴포넌트를 렌더링한 주체로
react-dom 의 버전을 확인할 수 있고
개발 모드에서는 부모 컴포넌트도 함께 볼 수 있다
Profiler
컴포넌트 메뉴는 정적 트리의 내용을 디버깅 하기 위한 도구라면
프로파일러는 레더링 과정에서 발생하는 상황을 확인할 수 있다
렌더링 과정에 개입해야 하기 때문에 프로덕션 모드에서는 사용할 수 없다
설정 변경
리액트 개발자도구 설정에서
-
General 탭의 Highligt updates when components reder 옵션을 켜두면
컴포넌트가 렌더링될 때 강조 표시를 한다 -
Debugging 탭의 Hide logs during second render in Strict Mode 를 활성화 하면
스트릭트 모드의 개발 환경에서도 렌더링이 1번 씩만 일어나게 된다 -
Profiledr xoqdml Record why each component renderer while profiling 을 설정하면 조금 느려질 수 있지만
프로파일링 도중 무엇 때문에 컴포넌트가 렌더링됐는지 기록한다
리액트 컴포넌트의 구조가 복잡해지면 개발자 도구를 사용하기도 힘들어진다
개발 단계에서 틈틈이 확인하는 것이 좋다
원하는 대로 잘 렌더링 되고 있는지, 메모라이징을 통해 잘 최적화가 이루어졌는지 등을 확인해보면서 의도대로 동작하는지 파악하는 것이 좋다
