(번역) Memoization으로 더 빠른 React Apps 만들기
Original Article: https://blog.px.dev/ui-performance/
Author: Nick Lanam
당신에게 느린 React 어플리케이션이 하나 있다고 가정해보겠습니다. 왜 느릴까요? 그리고 어떻게 고칠 수 있을까요? React 문서에는 몇 가지 팁을 제공합니다. 이 글에서는 Pixie의 UI에서 직면한 몇 가지 일반적인 성능 문제와 과도한 리렌더링을 어떻게 디버깅했는지를 담았습니다. 어떻게 이 문제를 해결했는지, 그리고 이런 문제가 발생하지 않도록 어떻게 예방했는지를 설명하겠습니다.
TL;DR: 대부분의 React 컴포넌트는 너무 자주 리렌더링 되었습니다. 그 컴포넌트를 메모이제이션 함으로써 해결했습니다. 우리는 React Dev Tools와 Why Did You Render를 사용해서 최악의 사례들을 찾았고, 앞으로 더 메모이제이션을 사용하도록 상기시키기 위해 eslint 규칙을 추가했습니다.
React DevTools의 Profiler 사용하기
우리는 문제를 찾기위해 공식 React Devtools 브라우저 확장 프로그램을 사용했습니다. Devtools는 전체 컴포넌트 트리, props, 에러를 표시해줍니다. 또한, 어떤 컴포넌트가 언제, 왜, 얼마나 긴 시간 렌더링을 하는지 분석하는 Profile 기능을 제공합니다.
그럼 Profiler를 사용해 함수의 upstream이 실행되어 얻은 데이터로 차트, 테이블, 그래프를 렌더링할 때를 Profile 해보겠습니다. Devtools의 Profiler 탭을 연 뒤, Profile을 시작합니다. 그리고, UI에서 문제가 되는 액션이 발생하면 Profile을 중지합니다. 이후, 문제가 되는 부분을 찾습니다.
아이고.. Profile에서 볼 수 있듯이 거의 앱의 전체가 업데이트되고 있습니다! 각 막대는 React render 된 컴포넌트를 나타내며, 색상은 활성화된 것을 의미합니다.
- 회색 컴포넌트는 렌더링 되지 않는 요소를 나타냅니다.
- 청록색 컴포넌트는 빠르게 렌더링 되는 요소를 나타냅니다.
