# [[React.lazy()|React.lazy()]]

## 📌 Brief Summary
`React.lazy()`는 리액트(React)에서 컴포넌트를 필요한 시점에 동적으로 불러올 수 있게 해주는 내장 함수입니다 [1]. 이 기능을 동적 임포트(Dynamic Imports)와 결합하면 거대한 자바스크립트 번들을 더 작은 청크(Chunk)로 나눌 수 있습니다 [2, 3]. 결과적으로 사용자가 앱에 처음 접근할 때 다운로드해야 하는 초기 자바스크립트 페이로드 크기를 대폭 줄여 앱의 초기 로드 속도와 전반적인 성능을 크게 향상시킵니다 [2-4].

## 📖 Core Content
*   **코드 스플리팅(Code Splitting)과 번들 사이즈 감소:**
    초기 로드 시 모든 코드를 한 번에 불러오면 번들 크기가 비대해져 성능 저하가 발생합니다 [5]. `React.lazy()`를 사용하면 거대한 애플리케이션 코드를 잘게 쪼개어, 특정 라우트나 컴포넌트가 렌더링될 때만 해당 코드를 네트워크를 통해 다운로드하도록 구성할 수 있습니다 [1, 6, 7].
*   **Suspense와의 결합:**
    `React.lazy()`로 불러오는 컴포넌트는 반드시 `<Suspense>` 컴포넌트로 감싸주어야 합니다 [1, 3]. `<Suspense>`는 모듈이 로드되는 동안 사용자에게 보여줄 대체 UI(예: 로딩 스피너)를 `fallback` 속성을 통해 정의하여 사용자 경험을 매끄럽게 만듭니다 [1, 3, 8].
*   **적용 대상(Use Cases):**
    *   **라우트 기반 컴포넌트(Route-based components):** 사용자가 특정 페이지로 이동할 때만 해당 페이지 코드를 로드합니다 [8, 9].
    *   **사용 빈도가 낮은 뷰:** 관리자 화면이나 설정 패널처럼 드물게 사용되는 화면에 적용합니다 [9].
    *   **무거운 UI 블록 및 서드파티 통합 기능:** 차트, 지도, 리치 텍스트 에디터, 비디오 플레이어 등 용량이 큰 위젯을 렌더링할 때 유용합니다 [3, 9, 10].
*   **빌드 도구와의 자동 통합:**
    Vite나 Webpack과 같은 최신 번들러는 `React.lazy(() => import('./Component'))` 문법을 자동으로 인식하여 해당 컴포넌트를 별도의 파일(청크)로 분리해 컴파일합니다 [2, 3, 8].

## ⚖️ Trade-offs & Caveats
*   **어보브 더 폴드(Above-the-fold) 요소 적용 금지:** 사용자가 페이지에 진입하자마자 즉시 보아야 하는 필수적인 컴포넌트나 빠르게 렌더링되어야 하는 요소에 `React.lazy()`를 적용하면 안 됩니다 [9]. 이를 지연 로딩할 경우 불필요한 네트워크 지연이 발생하여 오히려 체감 성능과 사용자 경험이 하락합니다 [9].
*   **레이아웃 시프트 및 사용자 경험 저하:** 비동기 로딩 중 `<Suspense>`의 `fallback`이 화면에 나타나면서, 로딩이 끝난 후 본래 컴포넌트로 전환될 때 레이아웃이 밀리거나 깜빡거리는 현상이 발생할 수 있습니다 [1, 11].

## 🔗 Knowledge Connections

### Related Concepts

#### [아키텍처/기반 기술]
- [[Code Splitting|Code Splitting]]
  - 연결 이유: `React.lazy()`의 존재 목적이자 근본적인 성능 최적화 기법입니다 [6].
  - 이 개념을 통해 더 깊게 이해할 수 있는 부분: 초기 렌더링 시 불필요한 자바스크립트 번들 크기를 줄여 로딩 성능을 최적화하는 애플리케이션 구조 원리.
- Dynamic Imports
  - 연결 이유: `React.lazy()` 함수 내부에서 비동기적으로 모듈을 로드하기 위해 사용하는 표준 자바스크립트 문법(`import()`)입니다 [2, 3, 8].
  - 이 개념을 통해 더 깊게 이해할 수 있는 부분: 브라우저가 특정 코드가 실행되어야 할 시점에 네트워크 요청을 생성하여 모듈을 가져오는 메커니즘.

#### [구현/활용 도구]
- Suspense
  - 연결 이유: `React.lazy()`로 분리된 코드가 백그라운드에서 다운로드되는 동안 앱이 멈추지 않도록 로딩 UI를 처리하기 위해 필수적으로 결합되는 리액트 기능입니다 [1, 3].
  - 이 개념을 통해 더 깊게 이해할 수 있는 부분: 비동기 렌더링 흐름에서 로딩 상태(Loading State)를 컴포넌트 트리 상단에서 선언적으로 처리하는 방법.
- Vite/Rollup
  - 연결 이유: 소스 코드에 작성된 `React.lazy()` 구문을 분석하여 빌드 타임에 물리적으로 개별 자바스크립트 파일(청크)로 분할해 내는 도구들입니다 [2, 8].
  - 이 개념을 통해 더 깊게 이해할 수 있는 부분: 모듈 번들러가 코드 스플리팅을 인식하고 프로덕션 환경의 정적 에셋으로 변환하여 캐싱 효율을 높이는 과정.

### Deeper Research Questions
- `React.lazy()`를 활용한 클라이언트 사이드 코드 스플리팅과 서버 사이드에서 이루어지는 [[React Server Components|React Server Components]]의 성능 최적화 방식은 어떻게 다르며 서로 어떻게 보완될 수 있는가?
- `<Suspense>`로 감싸진 지연 로딩 컴포넌트가 로드될 때 발생하는 Cumulative Layout Shift (CLS)를 최소화하기 위한 구체적인 UI 패턴과 전략은 무엇인가?
- 모바일 환경 등 네트워크 속도가 느린 곳에서 `React.lazy()`로 분리된 청크를 불러올 때, 에러가 발생한 경우(예: 배포 후 이전 해시 청크 삭제됨) 이를 Error Boundary로 어떻게 우아하게 복구할 수 있는가?
- 사용자가 컴포넌트를 요청하기 전(예: 링크에 마우스를 올리는 시점)에 `React.lazy()`로 분리된 청크를 미리 가져오는 프리패치(Prefetching/Preloading) 전략은 어떻게 구현하는가?
- Vite의 `manualChunks` 설정과 `React.lazy()`를 동시에 활용하여, 핵심 벤더 라이브러리 캐싱과 페이지별 지연 로딩을 결합하는 최적의 빌드 전략은 무엇인가?

### Practical Application Contexts
- **Implementation:** React 코드 상단에 모듈을 정적 임포트하는 대신, `const LazyComponent = React.lazy(() => import('./LazyComponent'))`로 선언하고, 렌더 트리에 사용할 때 `<Suspense fallback={<Spinner/>}> <LazyComponent/> </Suspense>` 형태로 감싸 구현합니다 [1, 3].
- **System Design:** 애플리케이션의 라우팅 레이어 설계 시, 모든 라우트를 초기 번들에 묶지 않고 각 페이지 또는 무거운 차트/에디터와 같은 독립적 도메인을 분리하는 기준으로 설계 기준을 수립합니다 [8, 9].
- **Operation / Maintenance:** `rollup-plugin-visualizer`나 Webpack Bundle Analyzer 등의 도구를 이용해 빌드 후 500KB가 넘어가는 큰 청크(Large chunks)가 있는지 모니터링하고, 발견 시 `React.lazy()`를 사용해 지연 로딩 가능한 부분으로 잘라냅니다 [7, 12, 13].
- **Learning Path:** React 컴포넌트 생명주기와 렌더링에 대한 이해 → 번들 크기가 성능에 미치는 영향 파악 → `React.lazy`와 `Suspense`를 통한 클라이언트 로딩 최적화 → 더 나아가 서버 사이드 렌더링(SSR) 및 서버 컴포넌트로 확장하는 경로로 학습을 진행합니다.
- **My Project Relevance:** 현재 유지보수 중인 프로젝트에 모달, 어드민 설정 패널 등 즉시 보이지 않는 컴포넌트들이 메인 번들에 포함되어 있다면, 이를 `React.lazy()`로 리팩토링하여 Time To Interactive (TTI) 지표를 당장 개선하는 데 적용할 수 있습니다.

### Adjacent Topics
- [[Core Web Vitals|Core Web Vitals]]
  - 확장 방향: `React.lazy()`를 적용했을 때 First Contentful Paint (FCP)와 Interaction to Next Paint (INP) 같은 구글의 웹 성능 지표가 어떻게 개선되는지 확인하는 방향으로 연구 확장 [1, 5].
- manualChunks
  - 확장 방향: `React.lazy()`에 의한 스플리팅 외에, React 코어나 서드파티 라이브러리들(vendor)을 별도 분리해 브라우저 캐싱을 고도화하는 빌드 도구 수준의 수동 제어 기법 파악 [8, 14].
- [[React Server Components (RSC)|React Server Components (RSC)]]
  - 확장 방향: 자바스크립트를 클라이언트로 아예 보내지 않고 서버에서 렌더링하여 성능을 극대화하는 최신 Next.js 패러다임과 클라이언트 단의 `React.lazy`를 비교 [9, 15].

---
*Last updated: 2026-04-30*