AI 요약관련 정보

• React 컴포넌트 에러 발생 시 하위 트리가 언마운트되어 빈 화면이 나타나는 문제 발생 💥
• Error Boundary는 렌더링 중 에러를 catch하여 Fallback UI를 제공, UI 전체 붕괴를 막는 안전망 역할 🛡️
• Error Boundary는 렌더링 중 발생하는 오류만 catch 가능, 이벤트 핸들러, 비동기 로직, 서버 사이드 렌더링 오류는 잡지 못함 🚫
• React 공식 API는 아니지만, 공식 문서에서 구현 아이디어와 예시 코드 제공 💡
• Error Boundary는 클래스형 컴포넌트로 구현, getDerivedStateFromError, componentDidCatch, render 함수 사용 ⚙️
• Error Boundary 적용 위치는 에러 영향 범위와 컴포넌트 고장 시 함께 고장나야 하는 컴포넌트 고려하여 결정 🎯
• 기능 단위 경계에서 Error Boundary를 적용하는 것이 가장 적절한 구조 🧱
• Error Boundary는 어플리케이션 안전성 보장, UX 개선, 디버깅/로깅 지원, 선언적 에러 처리 가능 🛠️
• 모든 에러 감지 불가, Fallback UI 대체 후 Reset 함수 필요, 경계 설정 모호, 클래스형 컴포넌트에서만 지원 등의 단점 존재 🤔
• Error Boundary는 에러 발생 시 전체 UI가 무너지지 않도록 하는 안전망 🥅