[react] 생명주기 메서드를 이용하여 에러 핸들링을 하는 방법은 무엇인가요?

22 Dec 2023

react

에러 핸들링을 하려는 컴포넌트 안에 componentDidCatch 메서드를 구현하면 됩니다. 이 메서드는 componentDidCatch(error, info) 형태로 구현됩니다. 여기서 error는 발생한 에러를 나타내며, info는 에러가 발생한 컴포넌트의 내부 정보를 포함합니다.

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

  componentDidCatch(error, info) {
    this.setState({ hasError: true });
    // 에러 로깅 또는 사용자에게 에러를 보여주는 등의 추가 작업 수행
  }

  render() {
    if (this.state.hasError) {
      return <h1>에러가 발생했습니다!</h1>;
    }
    return this.props.children;
  }
}

위 예제는 componentDidCatch 메서드를 이용하여 에러를 핸들링하는 방법을 보여줍니다. ErrorBoundary 컴포넌트를 사용하여 에러를 감싸면, 해당 컴포넌트와 하위 컴포넌트에서 발생한 에러를 처리할 수 있습니다.

에러 핸들링을 더 자세히 알고 싶다면, React 공식 문서를 참고하세요.