React 및 Next.js 웹 앱 성능 향상 가이드
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- *React 및 Next.js 개발자** (중급~고급)
- *난이도**: 기초 개념은 설명되나, 구체적인 코드 실무 기법을 다룸.
핵심 요약
- 불필요한 리렌더링 방지:
React.memo
또는useMemo
로 성능 최적화 (React.memo
,useMemo
강조) - 이미지 최적화: Next.js의
Image
컴포넌트 사용 (기본적으로 레지스터, 압축,srcSet
지원) - 번들 크기 감소:
React.lazy
,dynamic
으로 레이지 로딩,@next/bundle-analyzer
로 분석
섹션별 세부 요약
1. 리렌더링 최적화
React.memo
사용: props 변경 시만 리렌더링 (React.memo
강조)useMemo
로 계산된 값 캐싱:items.filter(...)
예시- 주의: 메모라이제이션 과도 사용 시 메모리 증가 유발
2. 이미지 최적화
- Next.js
Image
컴포넌트:
- 자동 압축
- srcSet
으로 반응형 크기 지원
- 외부 라이브러리 사용:
react-lazy-load-image-component
3. 레이지 로딩 및 번들 크기 감소
React.lazy
+import()
동적 임포트:
```javascript
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));
```
- Next.js
dynamic
사용:
```javascript
const HeavyComponent = dynamic(() => import('./HeavyComponent'), { loading: () =>
```
- Bundlephobia로 라이브러리 영향 분석
4. CSS 최적화
- CSS 모듈 또는 Tailwind 사용 (범위 제한)
- PurgeCSS로 불필요한 스타일 제거
- Tailwind 설정 예시:
```javascript
content: ['./pages//.{js,ts,jsx,tsx}', './components//.{js,ts,jsx,tsx}']
```
5. 서버 측 최적화
Cache-Control
헤더 설정- GZIP/Brotli 압축 사용 (Vercel 호스팅 시 자동 지원)
6. 성능 분석 도구
- Lighthouse: 수동 분석
- Web Vitals: 핵심 지표 측정 (
getCLS
,getFID
,getLCP
) - Sentry + @sentry/react: 오류 추적
- Next.js
getStaticProps
+revalidate
:
```javascript
revalidate: 60 // 60초마다 페이지 재생성
```
결론
- 지속적 개선을 위한 마인드셋 채택: 작은 최적화부터 시작해 측정 및 점진적 리팩토링
- 핵심 도구 활용:
@next/bundle-analyzer
,web-vitals
,getStaticProps
등으로 성능 모니터링 - 최적화 전략: 메모라이제이션, 레이지 로딩, 이미지 압축, 번들 분석 등 종합 적용
- "성능은 일회성 팁이 아닌, 지속적인 관리"라는 인식 확립