Perfomance 탭 Timing에서 React Component 관련 실행 내용

Question

안녕하세요 유익한 강의 잘보았습니다! :)

강의 예제의 경우 'Timing' 프레임 차트에서 DCL, FP 등과 함께 React Component 관련 실행 내용이 보이지만, 다른 리엑트 페이지들 살펴보니 예제 프로젝트 처럼 React 관련 내용이 표시되지는 않는 차이점을 발견했습니다.

혹시 Timing 프로파일링에 React Component에 대한 내용이 포함되게 하기 위해 플러그인이나 별도 설정이 필요한 부분이 있는 걸까요?

유동균 · Answer

안녕하세요  kkj 님, Performance 패널에서 React Components의 프레임차트에 대해서 질문을 주셨는데요. 기본적으로 해당 기능을 사용하기 위해서는 React Developer Tools 확장 프로그램이 필요합니다. 아래 링크에서 설치하실 수 있습니다. https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko 또한, 해당 확장 프로그램이 있다고 모든 React 웹 페이지를 검사 할 수 있는 것은 아니고, 개발 환경으로 실행된 React 프로젝트들에서만 해당 기능을 사용하실 수 있습니다. 즉, 어떤 사이트를 분석해보셨는지는 모르지만, 아무리 React로 개발된 서비스여도 개발환경이 아니면 React Developer Tools의 기능이 동작하지 않습니다. 답변이 도움되었기를 바라며,  강의에 관심을 가져주셔서 감사합니다. :)

인프런 커뮤니티 질문&답변

Perfomance 탭 Timing에서 React Component 관련 실행 내용