리액트 컴포넌트의 오류 처리를 어떻게 구현하나요?

컴포넌트 렌더링 중에 에러가 나면, 기본적으로 리액트는 전체 컴포넌트 트리를 언마운트해 화면이 깨집니다. 이를 막고 대체 UI(fallback) 를 보여 주는 장치가 에러 바운더리(Error Boundary) 입니다.

에러 바운더리

에러 바운더리는 두 생명주기 메서드 중 하나 이상을 구현한 클래스 컴포넌트입니다(2026년 기준 훅 버전은 없어, 보통 라이브러리를 씁니다).

• static getDerivedStateFromError — 에러 발생 시 상태를 갱신해 폴백 UI를 렌더링합니다.
• componentDidCatch — 에러 정보를 로깅합니다.

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

자신이 감싼 하위 트리의 렌더링 에러만 잡습니다. 그래서 앱 전체용, 위젯별용 등 여러 단계에 둘 수 있습니다.

<ErrorBoundary>
  <Profile />
</ErrorBoundary>

에러 바운더리가 못 잡는 것

에러 바운더리는 렌더링·생명주기·하위 트리 생성자에서 나는 에러만 잡습니다. 다음은 잡지 못하므로 직접 try/catch로 처리해야 합니다.

• 이벤트 핸들러 (onClick 등) — 렌더링 흐름 밖이므로 try/catch 사용
• 비동기 코드 (setTimeout, Promise) — try/catch 또는 .catch
• 서버 사이드 렌더링
• 에러 바운더리 자신에서 난 에러

function Button() {
  const onClick = async () => {
    try {
      await doSomething();
    } catch (e) {
      showToast('실패했어요');
    }
  };
  return <button onClick={onClick}>실행</button>;
}

실무에서는 직접 클래스를 만들기보다 react-error-boundary 라이브러리로 폴백과 재시도를 간편하게 구성하는 경우가 많습니다.