<aside> 💡 React Developer Tools 설치 React Developer Tools는 크롬 확장 프로그램으로 크롬 웹 스토어(https://chrome.google.com/webstore)에서 설치할 수 있음 ‘Chrome 에 추가’ 버튼을 클릭하면 설치되며, 설치 후 새 탭으로 크롭 개발자 도구를 열면 Components와 Profiler라는 패널이 생성되어 있음을 알 수 있음 Components는 크롬 개발자 도구의 Elements 패널과 비슷하게 리액트의 컴포넌트를 계층구조로 탐색할 수 있는 툴이며, Profiler는 리액트의 렌더링이 어느 시점에 일어났는지 분석하는 툴임
</aside>
크롬 개발자 도구에 추가된 Components, Profiler 패널
Components 패널의 설정 버튼을 클릭하면 다양한 설정을 할 수 있는 창이 뜸. 그 중 ‘Highlight updates when components render.’ 항목을 체크해줌
그리고 이미지 갤러리 헤더의 버튼을 눌러 보면 헤더와 이미지에 순간적으로 테두리가 나타나는 것을 볼 수 있음
이 표시는 해당 요소의 컴포넌트가 리액트 렌더링 사이클에 의해 리렌더링되었음을 의미함. 다시 말해 이 표시를 통해 어떤 컴포넌트가 어느 시점에 리렌더링되었는지 알 수 있고, 렌더링이 필요없는 경우에는 최대한 렌더링하지 않도록 하여 성능을 최적화하는 것임
이상한 점이 하나 있음. 이미지를 클릭해서 이미지 모달을 띄워을 때, 모달만 렌더링되지 않고 모달과 전혀 상관이 없는 헤더와 이미지 리스트 컴포넌트까지 리렌더링되고 있음
이 현상은 총 세 번 일어남. 모달을 띄우는 순간과 모달의 이미지가 로드된 후 배경 색이 바뀌는 순간, 그리고 모달을 닫는 순간임
지금은 서비스의 규모가 크거나 함께 리런데링되는 요소들이 무겁지는 않아서 체감상 많이 느리다는 느낌은 주지 않지만 뒤에 무거운 요소들이 있고 리렌더링에 많은 리소스를 사용한다면 서비스 이용 시 버벅거리는 느낌이 있을 수 있음