# [[Fallback UI]]

## 📌 Brief Summary
Fallback UI는 React 애플리케이션의 특정 부분에서 에러가 발생하거나 데이터를 로딩 중일 때 표시되는 대체 사용자 인터페이스입니다 [1-3]. 이는 결함이 있는 단일 컴포넌트 때문에 전체 애플리케이션이 중단되거나 빈 화면(하얀 화면)이 나타나는 것을 방지합니다 [1, 4]. 사용자에게 친숙한 에러 메시지나 로딩 상태를 제공하여 애플리케이션의 안정성과 전반적인 사용자 경험을 크게 향상시킵니다 [5, 6].

## 📖 Core Content
*   **에러 경계(Error Boundaries)와의 통합:** Fallback UI는 UI를 위한 'try-catch' 블록 역할을 하는 React 에러 경계와 함께 가장 중요하게 사용됩니다 [1]. 하위 컴포넌트 트리의 렌더링, 수명 주기 메서드 또는 생성자에서 JavaScript 에러가 발생할 경우, 에러 경계 컴포넌트는 에러를 포착하고 `static getDerivedStateFromError()`와 같은 메서드를 호출해 상태를 업데이트한 뒤, 깨진 컴포넌트 트리 대신 Fallback UI를 렌더링합니다 [2, 5, 7].
*   **전략적 배치 및 애플리케이션 안정성:** 애플리케이션 전체를 하나의 에러 경계로 감싸기보다는 타사 위젯, 차트, 복잡한 폼 등 독립적이거나 불안정한 섹션을 개별적으로 감싸는 것이 모범 사례입니다 [1, 8]. 이렇게 구성하면 특정 위젯이 실패하여 Fallback UI를 표시하더라도 애플리케이션의 나머지 부분은 계속 안정적으로 작동하고 상호 작용할 수 있습니다 [1, 9].
*   **사용자 중심 디자인:** Fallback UI는 단순하고 명확하며 유익하게 디자인해야 합니다. 기술적인 세부 사항으로 사용자를 압도하지 않으면서도, 무언가 잘못되었음을 이해할 수 있도록 친절한 오류 메시지를 제공하는 것이 권장됩니다 [5, 8].
*   **지연 로딩(Lazy Loading) 및 Suspense에서의 활용:** 에러 처리뿐만 아니라 성능 최적화를 위한 코드 분할 및 지연 로딩에도 Fallback UI가 핵심적인 역할을 합니다 [3]. `React.lazy()`를 사용하여 컴포넌트를 온디맨드 방식으로 로드할 때, `Suspense`를 결합하여 모듈이나 데이터가 로드되는 동안 보여줄 Fallback UI(예: 로딩 스피너, 스켈레톤 상태 등)를 정의할 수 있습니다 [3, 10].

## 🔗 Knowledge Connections
- **Related Topics:** [[Error Boundaries]], [[React Suspense]], [[Lazy Loading]]
- **Projects/Contexts:** [[Frontend Application Stability]], [[Performance Optimization]]
- **Contradictions/Notes:** 소스에 관련 정보가 부족합니다.

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