React 앱 로딩 속도 향상 전략: Suspense + 코드 스플리팅 실전 정리
🚀 React Suspense와 코드 스플리팅으로 로딩 최적화하기
React 앱이 점점 커지고 복잡해질수록 사용자 입장에선 “로딩이 오래 걸려요…”라는 불만이 나올 수 있어요.
특히 라우터 기반의 페이지 전환이나, 대규모 컴포넌트가 한 번에 불러와지는 경우엔 초기 로딩이 무겁고 지연되죠.
이런 문제를 해결하기 위한 핵심 전략이 바로 React의 Suspense + 코드 스플리팅(code splitting)입니다.
이번 글에서는 초급자도 이해할 수 있도록 차근차근 설명해볼게요.
✅ 1. 코드 스플리팅(Code Splitting)이란?
React 앱은 기본적으로 하나의 큰 번들 파일로 빌드됩니다.
하지만 이 번들 안에 모든 페이지와 컴포넌트가 포함되어 있다면?
- 사용자가 A 페이지만 사용해도 B, C, D 페이지 코드까지 미리 로드됨
- 결과적으로 초기 로딩 속도가 느려지고, 사용자 경험이 저하됨
해결책: 필요한 시점에 필요한 컴포넌트만 로드하자!
→ 이게 바로 코드 스플리팅이에요.
✅ 2. React에서 코드 스플리팅하는 방법
React는 기본적으로 React.lazy와 Suspense를 이용해 코드 스플리팅을 지원합니다.
📌 기본 사용법
import React, { Suspense, lazy } from "react";
const ProfilePage = lazy(() => import("./ProfilePage"));
function App() {
return (
<Suspense fallback={<div>로딩 중...</div>}>
<ProfilePage />
</Suspense>
);
}
React.lazy: 컴포넌트를 동적으로 importSuspense: 로딩 중일 때 보여줄 UI(fallback)를 지정
이 조합만으로도 컴포넌트 단위의 코드 스플리팅을 쉽게 구현할 수 있어요.
✅ 3. Suspense는 무엇인가요?
Suspense는 컴포넌트가 로드될 때까지 대기 상태를 처리해주는 컴포넌트입니다.
<Suspense fallback={<Loading />}>
<MyComponent />
</Suspense>
- fallback: 데이터나 코드가 준비되지 않았을 때 보여줄 UI
- 자동으로 fallback을 보여주는 구조로 UX를 개선할 수 있음
✅ 4. 실전 예제: 페이지 코드 스플리팅
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import React, { lazy, Suspense } from "react";
const Home = lazy(() => import("./pages/Home"));
const About = lazy(() => import("./pages/About"));
function App() {
return (
<Router>
<Suspense fallback={<div>페이지 로딩 중...</div>}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Suspense>
</Router>
);
}
✅ 이점: 사용자가 /about으로 이동할 때만 About 컴포넌트가 로드됨 → 초기 로딩이 빨라짐
✅ 5. Suspense를 쓸 때 주의할 점
- fallback은 필수! 없으면 앱이 멈춘 것처럼 보일 수 있어요.
- SSR(서버사이드 렌더링) 사용 시 주의: Next.js 등에서는 별도 설정 필요
- Suspense 중첩 가능 → 컴포넌트별로 나눠서 로딩 처리 가능
<Suspense fallback={<p>헤더 로딩 중</p>}>
<Header />
</Suspense>
<Suspense fallback={<p>본문 로딩 중</p>}>
<MainContent />
</Suspense>
✅ 6. 사용자 경험 개선 팁
로딩 상태에서는 그냥 "로딩 중..." 보다는 스켈레톤 UI가 더 좋은 UX를 제공합니다.
<Suspense fallback={<Skeleton count={5} />}>
<ArticleList />
</Suspense>
- 라이브러리 추천:
react-loading-skeleton,shimmer 효과 - 모바일에선 가벼운 fallback UI 사용이 권장됨
✅ 7. 번들 사이즈 줄이기: chunk 파일 확인하기
React 앱을 빌드하면 /build/static/js에 여러 개의 chunk 파일이 생성됩니다.
main.js: 핵심 번들 (최대한 작게 유지)chunk~...js: lazy-load된 모듈들
추가로 webpack-bundle-analyzer나 source-map-explorer 같은 도구로 시각적 분석도 가능해요.
✅ 8. 어디에 코드 스플리팅을 적용하면 좋을까?
- 라우팅 기반 페이지 (예: /about, /dashboard)
- 차트, 이미지 뷰어, 에디터 등 무거운 UI
- 관리자 페이지, 통계 페이지
- 모달, 팝업, 비정기적으로 등장하는 요소
→ “지금 꼭 필요하지 않은 컴포넌트”를 나중에 불러오도록 하세요!
✅ 마무리 요약
- React.lazy + Suspense는 코드 스플리팅의 핵심
- fallback UI는 꼭 지정, UX는 스켈레톤으로 개선
- chunk 파일로 초기 로딩 분산
- SSR 환경에선 설정 주의
필요할 때만 불러오는 스마트한 React 앱!
Suspense와 코드 스플리팅으로 만들어보세요! ✨
다음 글에서는 동적 import와 Suspense의 고급 활용법도 소개할게요 😄