지금부터는 에러를 잡아 주는 ErrorBoundary라는 컴포넌트를 생성해 보겠습니다. src 디렉터리에 ErrorBoundary.js 파일을 생성하고 다음과 같이 입력해 주세요.

ErrorBoundary.js

import React, { Component } from 'react';
 
class ErrorBoundary extends Component {
  state = {
    error: false
  };
  componentDidCatch(error, info) {
    this.setState({
      error: true
    });
    console.log({ error, info });
  }
  render() {
    if (this.state.error) return <div>에러가 발생했습니다!</div>;
    return this.props.children;
  }
}
 
export default ErrorBoundary;

---

 

에러가 발생하면 componentDidCatch 메서드가 호출되며, 이 메서드는 this.state.error 값을 true로 업데이트해 줍니다. 그리고 render 함수는 this.state.error 값이 true라면 에러가 발생했음을 알려 주는 문구를 보여 줍니다.