React | 렌더링 주기 - 에러 처리 단계 (Error Handling)

---

에러 경계 (Error Boundary)

• React 애플리케이션에서 컴포넌트 트리 하위에서 발생한 에러를 처리 방법을 제공하는 컴포넌트이다.
• 애플리케이션의 특정 부분에서 발생한 에러를 부모 컴포넌트에서 처리할 수 있도록 한다.
• 애플리케이션 최상위에서 사용된다.
• 필요에 따라 여러 개의 에러 경계를 중첩해서 사용할 수 있으며, 여러 에러를 독립적으로 처리 할 수 있다.
• 애플리케이션 일부에서 발생한 에러로 전체 애플리케이션의 렌더링이 중단되는 것을 방지 할 수 있다.

---

• static getDerivedStateFromError()
  
  • 자식 컴포넌트에서 에러가 발생했을 때 호출 되는 정적 메서드이다.
  • 에러 상태를 컴포넌트에 반영할 수 있다.
• componentDidCatch()
  • 생명주기 메서드 중 하나
  • 자식 컴포넌트에서 에러가 발생했을 때 호출되는 메서드이다.
  • 에러 정보 수집, 로깅 등의 작업을 수행할 수 있다.

---

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
      error: null,
      errorInfo: null,
    };
  }

  static getDerivedStateFromError(error) {
    // 에러가 발생하면 에러 상태를 업데이트
    return {
      hasError: true,
      error: error,
    };
  }

  componentDidCatch(error, errorInfo) {
    // 에러 정보를 로깅하거나 다른 작업을 수행
    console.error('Error caught by componentDidCatch:', error, errorInfo);
    this.setState({
      errorInfo: errorInfo,
    });
  }

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h1>Something went wrong!</h1>
          <p>{this.state.error && this.state.error.toString()}</p>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    // 의도적으로 에러를 발생
    throw new Error('This is an intentional error.');
    return <p>This component has an error.</p>;
  }
}

export default MyComponent;

import React, { Component } from 'react';
import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

class App extends Component {
  render() {
    return (
      <ErrorBoundary>
        <MyComponent/>
      </ErrorBoundary>
    );
  }
}

export default App;

[ 코드 실행 Result ]

• MyComponent에서 발생한 에러가 ErrorBoundary에서 처리 된다.
• 화면에는 "Something went wrong!" 과 함께 에러 메세지가 표시 된다.