# [[Suspense]]

## 📌 Brief Summary
React에서 제공하는 내장 도구로, 주로 `React.lazy()`와 함께 사용되어 애플리케이션의 코드 분할(Code Splitting) 및 지연 로딩(Lazy Loading)을 구현하는 데 핵심적인 역할을 합니다 [1, 2]. 동적으로 불러오는 모듈이나 데이터가 로드되는 동안 사용자에게 보여줄 대체 UI(예: 로딩 스피너, 스켈레톤 상태)를 정의합니다 [3, 4]. 이를 통해 초기 JavaScript 번들 크기를 줄이고 사용자 경험과 렌더링 성능을 최적화할 수 있습니다 [2, 3].

## 📖 Core Content
*   **지연 로딩(Lazy Loading)과 번들 크기 최적화**: 모던 프론트엔드 애플리케이션은 규모가 커짐에 따라 JavaScript 번들 크기가 증가하여 초기 로드 시간이 느려지는 문제가 발생합니다 [1, 2]. `Suspense`를 `React.lazy()` 함수와 함께 사용하면 대시보드, 차트, 지도와 같이 무거운 컴포넌트나 거의 사용되지 않는 뷰를 필요할 때만 온디맨드(on-demand) 방식으로 로드할 수 있습니다 [1, 3, 5]. 이 접근 방식은 초기 번들 크기를 잠재적으로 20~70%까지 감소시키며, TTI(Time to Interactive) 및 Core Web Vitals 지표를 개선하는 데 기여합니다 [1-3].
*   **라우트 레벨의 코드 분할(Route-level Code Splitting)**: Vite와 같은 번들러를 사용하는 React 프로젝트에서 각 페이지 라우트 요소를 `<Suspense>`로 감싸면, 전체 애플리케이션 코드가 한 번에 로드되는 것을 방지할 수 있습니다 [6, 7]. 결과적으로 각 페이지는 개별 청크(chunk) 파일로 분리되어, 사용자가 해당 경로로 이동할 때만 다운로드되도록 최적화됩니다 [7, 8].
*   **대체 UI(Fallback UI) 제공**: 지연 로딩 중인 컴포넌트가 준비될 때까지 화면이 비어있거나 애플리케이션이 멈춘 것처럼 보이지 않도록, `<Suspense>` 컴포넌트의 `fallback` 속성을 통해 로딩 인디케이터나 스켈레톤 UI를 제공합니다 [3]. 
*   **동시성 렌더링(Concurrent Rendering)과의 시너지**: React 18의 동시성 기능(예: `useTransition`)과 결합하여 사용할 경우, 데이터가 로드되거나 무거운 필터링 작업이 진행되는 동안 즉각적인 사용자 상호작용(타이핑, 클릭 등)을 차단하지 않으면서도 안정적으로 `fallback` UI를 표시할 수 있습니다 [4].

## 🔗 Knowledge Connections
- **Related Topics:** [[React.lazy()]], [[Code Splitting]], [[Lazy Loading]], [[Performance Optimization]], [[Concurrent Features]]
- **Projects/Contexts:** [[Vite + React 성능 최적화]], [[프론트엔드 애플리케이션 렌더링 병목 개선]]
- **Contradictions/Notes:** 필수적인 어보브 더 폴드(above-the-fold) 컴포넌트나 즉시 화면에 렌더링되어야 하는 빠른 UI 요소에는 `Suspense`와 지연 로딩을 적용하는 것을 피해야 합니다 [5].

---
*Last updated: 2026-04-26*