그알것 — 그럼에도 알아야 할 것들
홈질문커뮤니티
로그인
그알것 — 그럼에도 알아야 할 것들

Service

  • 홈
  • 소개
  • 질문
  • 커뮤니티

My

  • 내 워크스페이스
  • 저장한 질문
  • 작성한 답변

Policy

  • 이용약관
  • 개인정보처리방침
  • 문의

© 2026 그알것 · What Still Matters

질문 목록React
React

Error Boundary가 무엇이며, 이를 사용하는 이유는 무엇인가요?

실무3/5
설계4/5
인간4/5
기초3/5

면접관의 질문 의도

Error Boundary를 단순한 try/catch로 이해하는지, 아니면 _트리 어디에 두느냐_와 _boundary로 못 잡는 오류를 어떻게 보완하느냐_까지 보는지를 가른다.

큐레이션 답변

학습 자료

Error Boundary는 자식 컴포넌트의 렌더링·생명주기·생성자에서 던져진 오류를 잡아 fallback UI로 갈아끼우는 클래스 컴포넌트다. getDerivedStateFromError로 상태를 바꿔 fallback을 렌더링하고, componentDidCatch로 로깅·리포팅을 처리한다. 핵심은 _격리 범위_다 — 트리 어디에 두느냐가 곧 "어디까지 한꺼번에 죽일 수 있는가"를 결정한다. 단, 이벤트 핸들러·비동기 코드·SSR·boundary 자기 자신의 오류는 잡지 못한다.

좋은 답변 구조

  1. 01Error Boundary가 어떤 오류를 어디에서 잡는지 정의로 먼저 짚는다
  2. 02getDerivedStateFromError와 componentDidCatch의 역할을 묶어서 설명한다
  3. 03경계를 라우트·위젯·기능 단위 중 어디에 둘지를 사용자 흐름 관점에서 결정한다
  4. 04boundary가 잡지 못하는 영역(이벤트 핸들러·비동기·SSR)을 어떻게 보완할지로 마무리한다

자주 실수하는 포인트

Error Boundary가 이벤트 핸들러나 setTimeout 안 비동기 오류까지 잡는다고 본다
최상위 한 곳에만 boundary를 두고 그것을 격리라고 본다
fallback UI에 '오류 발생' 문구만 띄우고 재시도·이전 화면 같은 복구 경로를 안 둔다
componentDidCatch와 getDerivedStateFromError의 역할을 뒤섞어서 설명한다

실무 맥락

  • 결제·인증처럼 한 영역이 죽어도 다른 흐름은 계속 굴러가야 하는 화면
  • 써드파티 위젯·차트·임베드가 섞여 자기 코드 밖 오류가 트리에 흘러드는 페이지
  • 라우트 단위 코드 스플리팅이 걸려 chunk 로딩·렌더가 부분적으로 터지는 SPA

본인 경험에 녹이는 힌트

위젯 하나가 터져 화면 전체가 흰 화면이 됐던 장애 경험을 boundary 배치 결정과 연결할 수 있다

써드파티 SDK 업데이트 후 렌더 오류가 나서 임시 boundary로 막았던 경험을 풀 수 있다

이벤트 핸들러 안 비동기 오류가 boundary에 안 잡혀서 try/catch나 전역 핸들러로 보완한 사례를 이어 말할 수 있다

커뮤니티 인기 답변

전체 0개

아직 공개된 답변이 없어요. 첫 공개 답변을 남겨보세요.

관련 꼬리 질문

Q1Error Boundary가 잡지 못하는 오류는 어떤 것들이고 어떻게 보완하나요
Q2라우트 단위와 위젯 단위 중 어디에 두는 게 좋다고 보나요
Q3fallback UI에는 어떤 정보를 보여주는 게 적절한가요
Q4boundary에서 잡은 오류를 운영 측에서 어떻게 추적·복구하나요
아직 답을 쓰지 않았어요.
큐레이션 답변과 다른 사람 답변을 보고, 자기 언어로 답을 정리해보면 학습 효과가 가장 큽니다.
목차
  • 01면접관의 질문 의도
  • 02큐레이션 답변
  • 03좋은 답변 구조
  • 04자주 실수하는 포인트
  • 05실무 맥락
  • 06본인 경험에 녹이는 힌트
  • 07커뮤니티 인기 답변준비중
  • 08관련 꼬리 질문