Progressive React
Source
Evernote/Inbox/Progressive React.md
Summary
이 문서는 React 애플리케이션의 성능을 최적화하여 더 많은 사용자가 접근할 수 있도록 하는 ‘Progressive React’ 접근법을 다룹니다. 저자는 Create React App 기반의 초기 앱이 저사양 모바일 기기(예: Moto G4)와 느린 네트워크 환경(3G Slow)에서 인터랙티브 상태에 도달하는 데 상당한 시간이 걸린다는 점을 지적하며, HTTP Archive 데이터를 통해 React 사이트의 중위값 Time to Interactive(TTI)이 약 19.7초에 달할 수 있음을 경고합니다. 성능 개선을 위해 컴포넌트 레벨의 불필요한 리렌더링 최소화(React.memo, PureComponent 등), 코드 스플리팅(React.lazy, loadable-components), 서비스 워커 캐싱, SSR 스트리밍 또는 프리렌더링, 그리고 접근성(A11y) 확보 등 구체적인 체크리스트를 제시합니다.
Key Points
- React 앱의 기본 번들 크기(react-dom 포함 ~33kB)도 저사양 기기 및 느린 네트워크에서 로딩 지연을 유발할 수 있음.
- HTTP Archive 데이터에 따르면 React 사용 사이트의 중위값 TTI(Time to Interactive)는 약 19.7초로 성능 개선이 시급함.
- 성능 측정 도구: Chrome DevTools Performance panel, React DevTools profiler, Lighthouse.
- 컴포넌트 최적화: shouldComponentUpdate 오버라이드, PureComponent/React.memo 사용, Redux 셀렉터 메모이제이션, 긴 리스트 가상화(react-window).
- 앱 레벨 최적화: 코드 스플리팅(React.lazy 또는 loadable-components), 서비스 워커 캐싱(Workbox), SSR 시 스트리밍 사용, 비 SSR 시 프리렌더링(react-snap), CSS-in-JS 시 크리티컬 스타일 추출.
- 접근성(A11y) 및 PWA 매니페스트 추가를 통해 사용자 경험과 접근성을 향상시킴.