[React] React Profiler로 성능을 측정해보자

React의 컴포넌트는 아래와 같은 상황일 때 리렌더링됩니다.

• state의 값이 변했을 때
• context의 값이 변했을 때
• 부모 컴포넌트가 리렌더링 되었을 때 자식 컴포넌트도 리렌더링됨
• props의 값이 변했을 때

불필요하게 렌더링이 많아지거나, 혹은 렌더링에 오랜 시간이 걸린다면 최적화를 고려한다는 판단을 할 수 있지요. 

크롬 확장 프로그램 React Profiler를 이용하면 렌더링을 추적할 수 있습니다.

 

개발자 도구 Profiler 탭에 들어가서 녹화 버튼을 클릭하고, 동작을 수행한 뒤 녹화를 정지하면 해당 동작으로 인해 발생한 렌더링을 분석해줍니다.

 

 

회색은 렌더링이 일어나지 않은 컴포넌트이며, 밝은 노란색 컴포넌트는 유독 렌더링하는 데 시간이 오래 걸린 컴포넌트를 나타냅니다.

 

Ranked라는 하위 탭을 선택하면 시간에 따른 내림차순으로 차트로 그려주지요.

 

우측에서는 Rendered at, 즉 언제 렌더링되었는지를 리스트로 보여줍니다.

 

이 컴포넌트는 state 값이 실시간으로 계속 변하는 컴포넌트입니다.

그런데 다른 컴포넌트들까지 확인한 결과, 이 컴포넌트의 자식 컴포넌트들까지 실시간으로 렌더링된다는 것을 파악하였습니다.

 

이런 경우에 React.memo를 사용하여 최적화할 수 있을 것 같습니다.

React.memo는 앞서 언급했듯이, 부적절하게 사용되면 오히려 성능 저하의 원인이 될 수 있기에 최적화 시 Profiler로 점검하는 것이 권장됩니다.

 

더욱이, Profiler의 설정으로 들어가게 되면, 렌더링이 될 때마다 해당 컴포넌트 화면에 시각적으로 효과를 주는 Highlight 기능도 켤 수 있습니다. 이 기능을 사용한다면 어떤 동작을 할 때 불필요한 컴포넌트까지 함께 렌더링되는지 여부를 확실히 파악할 수 있겠죠.