📖 이전 성능 개선 편을 참고해주세요.
1. 성능 개선 #1. LightHouse로 성능 파악해보기
2. 성능 개선 #2. 이미지 용량 줄이기
3. 성능 개선 #3. React Profiler로 컴포넌트 해부하기
이번 4월 초부터 Wanted의 프리온보딩을 듣게 되었는데 그 과정에서 React의 Profiler라는 친구를 알게 되었다. LightHouse 처럼 화면을 실행을 시키고 그 과정을 녹화를 따서 기록하여 분석해주는 도구라고 한다.
하지만 LightHouse와는 달리 컴포넌트의 렌더링 기간을 순차적으로 측정을 해주는 도구라서 컴포넌트 관련 최적화를 시도할 때 많이 용이하다고 한다.
이번 최적화는 React Profiler를 통하여 문제점을 인식하고 컴포넌트를 어떻게 개선해야 될지 적어보려고 한다💡.
React Profiler
React Profiler란?
React 16.5 버전부터 브라우저에서 사용할 수 있는 플러그인으로 React 어플리케이션의 성능을 렌더링되는 각 구성 요소를 파악하기 위해 해당 정보를 수집하는 도구를 말한다.
실행 방법
LightHouse도 DevTools에서 꺼내서 볼 수 있듯이, React로 만든 프로젝트는 DevTools 탭에 숨겨져 있다.
이렇게 처음 Profiler에 접근하게 되면 볼 수 있는 정보가 없다. 그렇다면 어떻게 활용하면 될까? 아래에서 순차적으로 설명을 하도록 하겠다.
- 먼저 서비스 구동 상태를 기록을 해야한다. 그러기 위해서는 녹화 버튼을 눌러야 한다. 위의 사진을 보면
No profiling data has been recorded. Click the record button to start recording이라고 보이는데 좌측 상단에 해당되는 버튼을 누르고 페이지 구분하지 않고 프로젝트를 사용하고 그만 기록하고 싶을 때 아래와 같이 빨간 버튼을 누르면 된다.
기록되는 것은 녹화버튼을 누른 후에 렌더링 되는 컴포넌트를 기록하게 된다. 만약 이미 렌더링이 완료된 페이지에서 다른 컴포넌트들이 렌더링하지 않으면 아무것도 기록이 안된다.
필자처럼 왜 기록이 안되요 ~? 하기 보다는 여러 컴포넌트들이 렌더링하도록 시도를 해보자
- 이제 녹화해서 얻은 정보들이 표시가 될 것이다. 자세한 정보를 React 공홈에서 GIF로 설명이 잘나와있어서 그 부분을 한번 참고해주시면 좋을 듯하다. 아직 필자가 상세히 쓰기에는 할 일이 생각보다 많아서.. ㅎ (귀찮음 반이 섞여있긴 합니다. 그래서 무요! 이 글은 내 프로젝트 최적화 정리 글이라서 괜찮다고 생각한다)
암튼 여기를 참고해주세용 👉 React Profiler Doc
Reference
https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#reading-performance-data
https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#reading-performance-data
https://medium.com/wantedjobs/react-profiler%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-%EC%84%B1%EB%8A%A5-%EC%B8%A1%EC%A0%95%ED%95%98%EA%B8%B0-5981dfb3d934
https://velog.io/@doodream/React-%EB%A9%94%EB%AA%A8%EC%A0%9C%EC%9D%B4%EC%85%98%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%9B%B9-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%84%B1%EB%8A%A5%EA%B0%9C%EC%84%A0feat.-lighthouse
https://velog.io/@cookie004/%EB%B2%88%EC%97%AD%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%94%84%EB%A1%9C%ED%8C%8C%EC%9D%BC%EB%9F%AC%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%95%B1-%EC%84%B1%EB%8A%A5-%ED%96%A5%EC%83%81
