프론트엔드 프레임워크와 Lazy Loading
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- *프론트엔드 개발자 (React/Next.js 기반)**
- 중급 이상의 기술 수준을 가진 개발자
- 성능 최적화 및 번들 크기 관리에 관심 있는 대상
핵심 요약
- Lazy Loading은 초기 로딩 시 컴포넌트 불러오기 지연으로 번들 크기 감소와 렌더링 성능 향상 가능
- React.lazy() + Suspense로 조건부 렌더링과 import 조건 분리 가능
- Next.js의 next/dynamic()은 SSR 비활성화로 클라이언트 전용 로딩 지원
- 성능 개선 효과 (약 40% 번들 감소, TTI 개선) vs 레이아웃 점프(Layout Shift) 등 UX 편차 주의
섹션별 세부 요약
1. 초기 로딩 문제점
- JS 번들 크기 증가 → Virtual DOM diffing 비용 증가
- Commit 단계 과부하 → 렌더링 병목, 프레임 드랍, TTI 지연
- 사용자 경험 저하 (애니메이션 끊김, UI 반응 지연)
2. Lazy Loading의 이점
- Virtual DOM 트리 크기 축소 → diffing/commit 과정의 연산 부담 완화
- 필요 시점만 로딩 → 네트워크 비용 절감 및 초기 렌더링 가속
- 대규모 컴포넌트 집합 (예: 100개 입력 필드)에 적용 시 UX 및 성능 균형 유지
3. React 기반 구현 방법
- React.lazy() + Suspense 사용 예시
```jsx
const Chart = React.lazy(() => import('./Chart'));
```
- 렌더링 조건과 import 조건 분리 → 사용자 요청 시점에만 로딩
- Suspense fallback 필수 → 로딩 중 대체 UI 제공
4. Next.js 기반 구현 방법
- next/dynamic() 사용 예시
```jsx
const Chart = dynamic(() => import('../components/Chart'), {
ssr: false,
loading: () =>
차트를 불러오는 중입니다...
,});
```
- SSR 비활성화 (ssr: false) → SEO 영향 최소화
- 대시보드/관리자 페이지 등 SEO 비중 낮은 영역에 적합
5. 조건부 렌더링 vs Lazy Loading 비교
| 항목 | 조건부 렌더링 | Lazy Loading |
|--------------|--------------------------|-----------------------------|
| 목적 | JSX 출력 제어 | import 시점 제어 |
| React 방식 | if
, &&
, 삼항 연산자 | React.lazy
, Suspense
|
| Next.js 방식 | useState
, useEffect
| next/dynamic()
|
| 성능 향상 | 렌더링만 지연 | 코드 분할 + 렌더링 지연 |
| SEO 영향 | 없음 | SSR 여부에 따라 있음 |
결론
- Lazy Loading 적용 시
Suspense fallback
반드시 포함 → 사용자 경험 향상 - 레이아웃 점프(Layout Shift) 방지를 위해 컴포넌트 위치 고정 또는 예약 공간 확보 필요
- 대규모 컴포넌트 집합 (예: 차트, 탭)에 적용 시 성능 개선 효과 높음 (약 40% 번들 감소)
- SEO 중요 영역은 SSR 활성화 (Next.js의
ssr: true
) → Lazy Loading 사용 시 주의