Error Boundary란?

react 컴포넌트에서 발생하는 오류를 잡아내고, 전체 애플리케이션이 다운되는 것을 방지하기 위한 특수한 컴포넌트

일반적으로 클라이언트에서 오류가 발생할 때 표시할 ui를 제공하여, 애플리케이션의 신뢰성과 사용자 경험을 높이는데 활용

클래스형 컴포넌트의 componentDidCatch와 getDerivedStateFromError 두가지 라이프사이클 메서드를 사용하여 오류 발생 시의 행동을 정의함
ErrorBoundary는 클래스형 컴포넌트에서만 사용할 수 있음

componentDidCatch

• 클래스 컴포넌트 전용 생명주기 메서드
• 컴포넌트 트리에서 발생한 에러를 로그로 기록, 추가적인 에러 처리를 수행할 때 사용

  class ErrorBoundary extends React.Component {
  componentDidCatch(error, info) {
    // 에러 로깅
    console.error("Caught error:", error);
    console.error("Error info:", info);
  }
  render() {
    return this.props.children;
  }
  }

• 에러의 세부정보를 전달받아 로깅하거나, 외부 서비스로 전송 가능
• 렌더링 에러만 잡을 수 있음(이벤트 핸들러, 비동기 로직에선 작동 안함)

getDerivedStateFromError

• 클래스 컴포넌트 전용 정적 메서드
• 에러가 발생하면 특정 상태를 업데이트를 해서 UI변경할 때 사용
• 렌더링 과정에서만 호출

  class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  static getDerivedStateFromError(error) {
    // 에러가 발생하면 상태를 업데이트
    return { hasError: true };
  }
  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>; // 에러 UI
    }
    return this.props.children;
  }
  }

• 에러가 발생했음을 상태로 기록해 UI 변경 가능
• 렌더링에만 관여하며, 로그 기록이나 부가 작업은 할 수 없음

Error Boundary가 필요한 이유

React는 기본적으로 비동기 작업에서 발생하는 오류를 자동으로 처리하지 않으므로, 오류가 발생할 경우 페이지 전체가 하얗게 변하거나 사용자 입장에서 알 수 없는 화면이 표시되는 상황이 발생
이는 사용자 경험을 저해하고, 대규모 애플리케이션에서 신뢰성에 큰 문제가 됨
이러한 문제를 해결하여 에러가 발생한 영역에서 대체 UI를 표시하고, 애플리케이션의 나머지 부분은 정상적으로 동작하도록 도와줌
Error Boundary를 적절히 배치하면, 오류가 발생한 컴포넌트만 대체 UI로 전환되어 애플리케이션의 안정성을 유지하고, 사용자에게 오류 메시지나 대체 화면을 제공하여 더 나은 사용자 경험을 제공함
더불어 오류 발생 시의 대체 UI로직을 선언형으로 작성할 수 있게 하여 코드의 가독성과 유지 보수성을 높임

선언형?? why 유지 보수성을 높임??

개발자가 무엇을 해야 하는지를 정의하는 방식
어떻게 할지에 대한 세부적인 절차를 직접 작성하지 않아도 된다는 뜻
ex- Error Boundary에서 이 컴포넌트가 오류를 감지하면 특정 대체 UI를 보여준다와 같은 목적을 코드상에 명시하면 실제로 오류가 발생할 때 실행되는 세부적인 절차는 컴포넌트가 알아서 처리

그러한 선언형 코드가 명령형 코드에 비해 직관적이고 간결하여 가독성이 높아 유지 보수성에 도움이 됨
비즈니스 로직과 에러 처리 로직이 명확하게 분리되어 코드의 복잡성이 낮아짐