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

컴포넌트 개발 도구

Components

• 정적인 현재 리액트 컴포넌트 트리의 내용을 디버깅하기 위한 도구
• 16.8 버전 이하 : 함수 선언식 또는 표현식으로 선언되지 않은 컴포넌트는 명칭 추론 불가능을 이유로 문제가 발생
• 18.6 버전 이후 : 16.8 버전에서 ‘일부 명칭을 추론할 수 없는 Anymous’가 _cs, _c5 등으로 개선됨. 그러나, 임의로 명칭이 선언되었기 때문에, 컴포넌트를 기명 함수로 변경하는 방법을 지향한다.
• 컴포넌트를 익명 함수로 선언하기 곤란한 경우, 혹은 함수명과는 별개로 특별한 명칭을 부여해 명시적으로 확인이 필요한 경우 displayName을 사용하면 좋다. 그러나 이는 빌드 도구가 사용하지 않는 코드로 인식해 삭제할 가능성이 있기 때문에, 개발 모드에서만 제한적으로 참고하는 것이 좋다.

Profiler

• 리액트가 렌더링하는 과정에서 발생하는 상황을 확인하기 위한 도구
• 프로파일링 메뉴 : 리액트가 렌더링할 대 어떤 일이 벌어지는지 확인할 수 있는 도구
• Flamegraph : 랜더 커밋별로 어떠한 작업이 일어났는지 나타내는 도구. 너비가 넓을수록 해당 컴포넌트를 렌더링하는 데 오래 걸렸다는 것을 의미
• Ranked : 해당 커밋에서 렌더링하는 데 오랜 시간이 걸린 컴포넌트를 순서대로 나열한 그래프
• Timeline : 시간이 지남에 따라 컴포넌트에서 어떤 일이 일어났는지를 확인할 수 있는 도구. 시간의 흐름에 따라 리액트가 작동하는 내용을 추적하는데 유용