✅ [21편] 리액트 성능 최적화 심화편

코드 스플리팅 · Lazy Loading · Suspense 완벽 가이드

리액트 앱이 커질수록 가장 크게 문제되는 요소는 바로 초기 로딩 속도입니다.
SPA 구조 특성상, 초기 번들 크기가 너무 크면 사용자 경험이 급격히 떨어지고
특히 모바일 사용자 환경에서는 로딩 시간이 그대로 이탈률로 이어집니다.
이 문제를 해결하기 위한 핵심 기술이 바로 코드 스플리팅(Code Splitting),
그리고 이를 자연스럽게 구현하는 Lazy Loading + React Suspense입니다.
이번 글에서는 성능 최적화를 아키텍처 수준에서 실행하는 방법을
실무 기준으로 자세히 정리해드리겠습니다.

🟦 1. 왜 코드 스플리팅이 중요한가?

리액트 앱은 번들링 과정에서 모든 컴포넌트를 하나의 파일로 묶는 경향이 있습니다.
규모가 커질수록 이 초기 파일은 수백 KB~수 MB까지 커질 수 있습니다.
문제는 다음 두 가지입니다.
✔ 1) 초기 로딩 시간 증가
사용자는 앱을 켤 때마다 무거운 번들을 모두 다운로드해야 합니다.
✔ 2) 사용하지 않는 코드까지 모두 다운로드
현재 페이지에서 필요 없는 컴포넌트도 함께 불러오게 됩니다.
이런 비효율을 해결하는 방법이 바로 코드 스플리팅입니다.

🟦 2. React.lazy로 컴포넌트 단위 코드 스플리팅

가장 일반적이고 쉬운 방법은 React.lazy()를 활용하는 방식입니다.
✔ 기본 사용법
const UserPage = React.lazy(() => import("./pages/UserPage"));
이렇게 하면 UserPage는 최초에 로드하지 않고,
해당 컴포넌트가 처음 필요할 때 동적으로 import됩니다.
📌 즉, “필요할 때 불러오는” Lazy Loading 구조가 자연스럽게 만들어지는 것입니다.

🟦 3. Suspense와 함께 사용해야 정상 동작

Lazy 컴포넌트는 로딩 상태가 필요합니다.
이를 해결하는 것이 <Suspense />입니다.
<Suspense fallback={<div>로딩 중...</div>}>
<UserPage />
</Suspense>
fallback에는
스피너
로딩 바
skeleton UI
등을 넣어 UX를 개선할 수 있습니다.

🟦 4. 라우팅에서 코드 스플리팅 적용하기 (실무에서 가장 많이 씀)

React Router에서 실무자가 가장 많이 사용하는 패턴입니다.
const ProductPage = lazy(() => import("./pages/ProductPage"));
<Routes>
<Route
path="/product/:id"
element={
<Suspense fallback={<Loading />}>
<ProductPage />
</Suspense>
}
/>
</Routes>
이렇게 하면 라우트를 이동할 때 필요한 컴포넌트만 로딩됩니다.

🟦 5. 성능 체감도가 확 달라지는 Split 전략

✔ 전략 1: 라우트 기반 코드 스플리팅
페이지 단위로 분리하면 효과가 큼.
✔ 전략 2: 모달/드롭다운 같은 무거운 UI 분리
사용자가 실제 클릭해야 불러오도록.
✔ 전략 3: 관리자 페이지 따로 분리
일반 유저가 절대 접근하지 않는 관리자 화면을 별도 chunk로 분리.
✔ 전략 4: 그래프/에디터 라이브러리 지연 로딩
chart.js, slate.js 같은 대형 패키지가 대표적입니다.

🟦 6. dynamic import로 특정 기능만 분리하기

단순 컴포넌트가 아닌 특정 기능이나 util도 동적으로 불러올 수 있습니다.
const { heavyTask } = await import("./utils/heavyTask");
이 전략은 무거운 계산 로직을 필요할 때 내려받도록 해 성능 이점을 극대화합니다.

🟦 7. Suspense for Data Fetching (리액트 18 이후)

React 18 이후, Suspense는 데이터 로딩에도 사용될 수 있습니다.
특히 Next.js 13 App Router의 서버 컴포넌트와 함께 사용할 때 강력한 UX를 보여줍니다.
✔ 예시
<Suspense fallback={<Loading />}>
<UserProfile id={id} />
</Suspense>
UserProfile이 데이터를 가져오는 동안 fallback UI가 표시됩니다.

🟦 8. 코드 스플리팅이 주는 실전 효과

TTI(Time to Interactive) 획기적 감소
LCP(Largest Contentful Paint) 개선
초기 JS 다운로드량 감소
모바일 환경에서 렌더링 속도 체감 증가
불필요한 리렌더링 감소
성능 지표와 사용자 경험 모두 크게 향상됩니다.

🟦 결론

코드 스플리팅은 단순히 “로딩을 늦추는 기술”이 아니라,
리액트 앱 성능 최적화의 핵심이자 기본 전략입니다.
Lazy Loading + Suspense 조합을 제대로 활용하면
대규모 앱에서도 빠르고 부드러운 사용자 경험을 제공할 수 있습니다.