React Error Boundary를 설명해 주세요

fallbackclass-component

React Error Boundary를 설명해 주세요

예상 시간: 6분

30초 답변

Error Boundary는 React component tree 일부가 에러로 전체 앱을 깨뜨리지 않도록 막는 장치입니다. 하위 component가 render 중 에러를 throw하면 boundary가 이를 잡고 fallback UI를 보여줄 수 있습니다. 보통 class component로 구현하고, getDerivedStateFromError로 fallback 상태를 만들고 componentDidCatch로 logging을 할 수 있습니다.

다만 event handler, setTimeout, Promise callback 같은 비동기 영역의 에러는 error boundary가 자동으로 잡지 않습니다. 그런 에러는 직접 try/catch나 상태로 처리해야 합니다.

꼬리질문

조금 더 깊게 물어본다면

답변 뒤에 이어질 수 있는 질문들을 하나씩 열어볼 수 있어요.

event handler 에러는 왜 자동으로 못 잡나요?

부가 설명

class ErrorBoundary extends React.Component {
  state = { hasError: false };
 
  static getDerivedStateFromError() {
    return { hasError: true };
  }
 
  componentDidCatch(error, info) {
    reportError(error, info);
  }
 
  render() {
    if (this.state.hasError) return <p>문제가 발생했어요.</p>;
    return this.props.children;
  }
}

문제가 날 수 있는 영역을 boundary로 감싸면 해당 영역만 fallback으로 대체할 수 있습니다.

Error Boundary는 어디에 두느냐가 중요합니다. 앱 최상단에 하나만 두면 전체가 fallback으로 바뀌고, 중요한 widget 단위로 나누면 일부만 복구할 수 있습니다.

Error Boundary는 모든 에러를 잡지 않습니다. 범위는 rendering lifecycle 중 하위 tree에서 발생한 에러입니다.

한 줄 정리

Error Boundary는 render 중 하위 component tree에서 발생한 에러를 잡아 fallback UI로 앱 전체 붕괴를 막는 장치입니다.