[React] 에러처리

React에서 Error Boundaries는 컴포넌트 트리 내에서 JavaScript 에러를 포착하여 애플리케이션의 나머지 부분이 정상적으로 작동할 수 있도록 돕는 중요한 메커니즘입니다. 에러 경계는 React 16에서 소개되었으며, 주로 UI의 일부분만이 비정상적인 경우, 이를 포착하고 백업 UI를 렌더링하여 앱의 나머지 부분이 중단되지 않도록 설계되었습니다.

에러 경계(Error Boundaries)란?

에러 경계는 하위 컴포넌트 트리에서 JavaScript 에러를 포착하고, 로깅하며, 대체 UI를 렌더링하는 컴포넌트입니다. 이러한 에러는 렌더링 동안, 생명주기 메서드에서, 그리고 해당 트리 내부의 생성자(constructor)에서 발생할 수 있습니다.

에러 경계 사용법

에러 경계를 사용하기 위해서는 클래스 컴포넌트에서 static getDerivedStateFromError() 또는 componentDidCatch() 라이프사이클 메서드를 구현해야 합니다.

1. getDerivedStateFromError() 메서드

이 메서드는 에러가 발생한 후에 호출되며, 다음 렌더링에서 사용될 상태를 반환합니다. 주로 UI를 에러 상태로 업데이트하는 데 사용됩니다.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 다음 상태를 업데이트하여 다음 렌더링에서 fallback UI를 표시할 수 있습니다.
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      // 에러 UI를 커스텀하게 렌더링할 수 있습니다.
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

2. componentDidCatch() 메서드

이 메서드는 에러가 발생한 후에 호출되며, 에러 정보를 로깅하는 데 사용할 수 있습니다. 에러를 기록하거나 에러 리포팅 서비스에 보고하는 용도로 쓰입니다.

componentDidCatch(error, errorInfo) {
  // 에러 로그를 기록하거나 서버에 에러 정보를 보낼 수 있습니다.
  logErrorToMyService(error, errorInfo);
}

에러 경계의 사용 예

에러 경계는 아래와 같이 사용됩니다:

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

여기서 MyWidget 컴포넌트나 그 자손 컴포넌트 중 어느 하나에서 에러가 발생하면, ErrorBoundary 컴포넌트의 getDerivedStateFromError() 또는 componentDidCatch() 메서드가 호출되어 처리됩니다.

주의사항

• 에러 경계는 자식 컴포넌트에서 발생하는 에러만 처리할 수 있습니다. 에러 경계 자체 내에서 발생하는 에러는 처리할 수 없습니다.
• 이벤트 핸들러 내부의 에러는 포착되지 않습니다. 이벤트 핸들러에서의 에러 처리를 위해서는 try/catch 문을 직접 사용해야 합니다.
• 에러 경계는 대부분의 경우에 서비스의 가용성을 높이고 사용자 경험을 개선하는 데 도움이 됩니다. 하지만 가능한 에러의 원인을 찾아 해결하는 것이 최우선입니다.

React 애플리케이션에서 에러 경계를 적절히 사용함으로써, 예기치 않은 에러로부터 앱의 안정성을 보장하고 사용자에게 더 나은 경험을 제공할 수 있습니다.