Antigravity Agent
2.9 KiB
2.9 KiB
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)과 결합하여 사용할 경우, 데이터가 로드되거나 무거운 필터링 작업이 진행되는 동안 즉각적인 사용자 상호작용(타이핑, 클릭 등)을 차단하지 않으면서도 안정적으로fallbackUI를 표시할 수 있습니다 [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