[React] 지연로딩

21. 리액트 최적화: lazy()와 Suspense를 활용한 지연 로딩

초기 로딩 속도를 높이기 위해 당장 필요 없는 코드를 분리하고, 필요할 때만 불러오는 '코드 분할' 전략을 정리함

키워드: lazy(), Suspense, Dynamic Import, fallback, Loader Optimization

---

1. 컴포넌트 지연 로딩: lazy()와 Suspense

리액트 컴포넌트를 지연 로딩할 때는 반드시 두 가지가 짝을 이뤄야 합니다.

• lazy(): 컴포넌트 파일을 동적으로 import합니다. 이 함수는 프로미스를 반환하므로 리액트가 이해할 수 있도록 lazy로 감싸줘야 합니다.
• Suspense: 코드를 다운로드하는 동안 화면이 텅 비어있지 않게 fallback(로딩 화면)을 보여주는 역할을 합니다.

// 1. 선언: 미리 가져오지 않고, 필요할 때 가져오겠다고 약속함
const BlogPage = lazy(() => import('./pages/Blog'));

// 2. 사용: 로딩되는 동안 보여줄 UI(Suspense)로 감싸기
element: (
  <Suspense fallback={<p>Loading...</p>}>
    <BlogPage />
  </Suspense>
)

---

2. 로더(Loader) 지연 로딩: 동적 import()

리액트 라우터의 loader는 페이지에 들어가기 전에 데이터를 가져오는 함수입니다. 컴포넌트뿐만 아니라 이 데이터 처리 로직도 지연 로딩할 수 있습니다.

• 함수 할당: loader: postsLoader 대신 loader: () => ... 형태의 익명 함수를 넣습니다.
• 모듈 실행: import()로 파일을 가져온 뒤, .then((module) => module.loader())를 통해 그 파일 안에 들어있는 실제 로더 함수를 실행시킵니다.

loader: (meta) => 
  import('./pages/Post').then((module) => module.loader(meta))

⚠️ 주의: 상세 페이지처럼 params가 필요한 로더는 meta 객체를 받아서 그대로 실제 로더에 전달해줘야 에러가 나지 않습니다!

3. 지연 로딩의 흐름

지연 로딩이 적용된 앱의 구동 원리는 다음과 같습니다.

1. 초기 로딩: 사용자가 홈페이지 접속 → 블로그 코드는 다운로드되지 않음 (메인 번들이 가벼워짐)

2. 메뉴 클릭: 사용자가 블로그 링크를 클릭하는 순간 리액트 라우터가 loader 실행을 시작함.

3. 동적 다운로드: import() 함수가 작동하며 서버에서 블로그 자바스크립트 파일을 비동기로 가져옴.

4. 로딩 화면: 파일을 받는 동안 Suspense가 fallback 메시지를 사용자에게 보여줌.

5. 화면 표시: 파일 다운로드와 데이터 로딩이 모두 끝나면 비로소 BlogPage가 나타남.