[React] Error 다루기

JavaScript의 try catch문처럼 에러로 React가 컴포넌트를 그릴 수 없는 상황을 만들어줄 것이다.

먼저, 아래의 사진처럼 Child 컴포넌트에 throw new Error로 에러를 생성해줬다.

 

ErrorBonudary 

자식 안에서 에러가 났으면 Catch Error 해서특정한 화면을 보여주겠다는 영역이다.

아까와 같이 콘솔 창에서는 똑같은 에러가 뜨지만, 화면상에서는 특정 화면을 보여주는 것을 볼 수 있다.

이것을 함수형 컴포넌트로 만들 수 없는 이유는 에러가 났을 때 상태 값을 어떻게 처리하는 함수 자체(getDerivedStateFromError)를 클래스 컴포넌트에서만 제공을 하기 때문이다.

 

여기서 Fallback이라는 것은 Error가 났을 때 보여줄 컴포넌트를 의미한다.

  <script type="text/babel">
    const root = document.querySelector("#root");

    class ErrorBoundary extends React.Component {
      state = {
        error: null
      }
      static getDerivedStateFromError(error) {
        return {error};
      }
      render() {
        const {error} = this.state;
        if(error) {
          return <this.props.fallback error={error} />
        } else{
          return this.props.children;
        }
      }
    }

    const Child = () => {
      throw new Error("Something Wrong...");
      return <p>Child...</p>;
    }

    const Fallback = ({error}) => {
      alert(error.message)
      return <p>{error.message}</p>
    }

    const App = () => {
      return (
        <> 
          <p>App...</p>
          <ErrorBoundary fallback={Fallback}>
            <Child />
          </ErrorBoundary>
        </>
      )
    }

    ReactDOM.render(<App />, root)
  </script>