React Suspense & lazy() – 코드 스플리팅으로 로딩 속도 최적화하기

 

 

안녕하세요 😊
React 프로젝트가 커질수록 초기 로딩 속도가 느려지는 문제를 겪게 됩니다.
이럴 때 효과적인 방법이 바로 **코드 스플리팅(Code Splitting)**입니다.

 

React는 기본적으로 import로 컴포넌트를 불러오지만,
필요할 때만 해당 컴포넌트를 로드하도록 설정하면 초기 번들 크기를 줄일 수 있습니다.
이때 사용하는 것이 **React.lazy()**와 **<Suspense>**입니다.

---

📍 1. React.lazy()란?

• 컴포넌트를 **지연 로딩(Lazy Loading)**하는 함수
• 해당 컴포넌트가 실제로 필요할 때만 로드 → 초기 번들 크기 감소

기본 문법

const MyComponent = React.lazy(() => import("./MyComponent"));

---

📍 2. Suspense란?

• lazy로 로드되는 컴포넌트를 감싸
  로딩 중일 때 보여줄 fallback UI를 지정하는 컴포넌트

기본 문법

<Suspense fallback={<div>로딩 중...</div>}>
  <MyComponent />
</Suspense>

---

📍 3. 실전 예제

import React, { Suspense } from "react";

const Chart = React.lazy(() => import("./Chart"));
const UserProfile = React.lazy(() => import("./UserProfile"));

export default function Dashboard() {
  return (
    <div>
      <h1>대시보드</h1>
      <Suspense fallback={<p>차트를 불러오는 중...</p>}>
        <Chart />
      </Suspense>
      <Suspense fallback={<p>프로필 로딩 중...</p>}>
        <UserProfile />
      </Suspense>
    </div>
  );
}

 

✅ Chart와 UserProfile 컴포넌트는 해당 부분이 렌더링될 때만 로드
✅ 초기 로딩 속도 개선, 불필요한 코드 다운로드 방지

---

📍 4. 라우터와 함께 쓰기

React Router v6에서는 페이지 단위 코드 스플리팅도 간단히 적용 가능

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import React, { Suspense } from "react";

const Home = React.lazy(() => import("./pages/Home"));
const About = React.lazy(() => import("./pages/About"));

export default function App() {
  return (
    <Router>
      <Suspense fallback={<div>페이지 로딩 중...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

 

📌 페이지 단위로 로드하므로 SPA의 초기 번들 크기를 크게 줄일 수 있음

---

📍 5. 주의사항

• lazy()는 기본(default) export 컴포넌트만 로드 가능
• 로딩 UI는 반드시 <Suspense>로 감싸야 함
• 너무 많은 컴포넌트를 잘게 나누면 오히려 네트워크 요청이 많아져 성능 저하 가능
• 서버사이드 렌더링(SSR)에서는 별도 설정 필요

---

✅ 마무리

React.lazy()와 <Suspense>를 활용하면
필요한 시점에만 컴포넌트를 로드하여 초기 로딩 속도를 획기적으로 개선할 수 있습니다.
특히 페이지 단위 코드 스플리팅은 대규모 프로젝트에서 필수적으로 고려할 기술입니다. 🚀