에러 바운더리
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. 에러 바운더리(Error Boundary)의 주요 목적은?
💡 에러 바운더리는 렌더링 중 자식 컴포넌트에서 발생한 에러를 포착하여 Fallback UI를 보여주는 안전망입니다. 앱 전체가 크래시되는 것을 막고 나머지 UI는 정상 동작하게 합니다.
Q2. 에러 바운더리를 구현하기 위해 반드시 클래스 컴포넌트를 사용해야 하는 이유는?
💡 getDerivedStateFromError(에러로 state 업데이트)와 componentDidCatch(에러 로깅/리포팅)는 클래스 컴포넌트의 생명주기 메서드입니다. 이것이 에러 바운더리가 클래스 컴포넌트여야 하는 이유입니다.
Q3. 다음 중 에러 바운더리가 포착할 수 없는 에러는?
💡 에러 바운더리는 이벤트 핸들러 내부의 에러를 포착하지 못합니다. 이벤트 핸들러의 에러는 try-catch를 직접 사용해야 합니다.
Q4. getDerivedStateFromError와 componentDidCatch의 역할 차이는?
💡 getDerivedStateFromError는 렌더링 중에 호출되어 state를 업데이트합니다(hasError: true). componentDidCatch는 에러 발생 후 Sentry 등 에러 추적 서비스에 리포팅하는 부수효과를 처리합니다.
Q5. 실무에서 에러 바운더리를 배치하는 올바른 전략은?
💡 에러 바운더리는 독립적인 UI 단위(네비게이션, 사이드바, 메인 콘텐츠, 위젯)마다 적용하는 것이 좋습니다. 한 섹션의 에러가 다른 섹션에 영향을 주지 않아 사용자 경험을 보호합니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.