리렌더링 여부를 편하게 확인 할 수 있는 크롬 확장 프로그램 중 하나인 React Developer Tools 사용법에 대해 정리했다.

설치

chrome extention에서 react develop tools을 설치한다.

https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

설정

확장 프로그램에서 React Developer Tools 세부 정보에 들어간다,

세부 정보에서 사이트 액세스와 파일 URL에 대한 액세스 허용 설정하고, 시크릿 모드에서도 개발테스트를 허용한다면 온 처리한다.

개발자 도구를 연 후 “>>” 이 클릭해보면 Components가 있다. 클릭하면 React 컴포넌트에 대한 정보가 나온다.

검색 창 옆에 있는 설정 버튼을 눌려 Highlight updates when components render. 를 체크해주면 re-rendering되는 컴포넌트가 있을 때마다 컴포넌트의 경계 부분을 강조 표시한다.

해당 기능을 통해 불필요한 렌더링이 발생하지는 않는지 눈으로 식별할 수 있다. 렌더링 되는 빈도에 따라 강조 표시되는 색상이 변한다. 파란색 -> 녹색 -> 노란색 -> 빨간색 순으로 갈수록 빈번하게 렌더링 됨을 의미한다.

참고

https://ssdragon.tistory.com/104#--%--%--React%--Developer%--Tools%--%--�%B-%--�%--%--�%--%B-�%--%-C%--�%B-%--�%B-%--�%--%--�%B-%B-

https://velog.io/@seesaw/React-개발자-도구-활용하기-Dev-Tools