React { Error Handling }

Error 다루기 

 

Child라는 p태그하나 달린 컴포넌트를 만들고, <p>App</p> 랜더링 다음에 Child 컴포넌트를 랜더링을 해야지만 throw new Error로 에러를 강제했기때문에 아무것도 랜더링 되지않는다. 여기서 다른 랜더링만은 끝마치고 에러를 다른  형태로 나오게 할 수 있을까가 ? 수업의 주제였다. 알아보자 

const rootElement = document.getElementById('root');
    
    const Child = () => {
      throw new Error("Something Wrong...");
      return <p>Child....</p>
    }
  
    const App = () => {
       return <>
        <p>App</p>
        <Child/>
      </>;
    }
  ReactDOM.render(<App />, document.getElementById("root"));

자바스크립트의 try catch 문처럼 에러를 핸들링하기 위해서 클래스 컴포넌트로 만들었고, 에러가 났을때 상태값을 처리하는 함수를 클래스 컴포넌트에서만 제공을 하고 있기때문이다. 그래서 이렇게밖에 사용을 못한다고 한다. 

 

    const rootElement = document.getElementById('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} />
        }
        return this.props.children;
      }
    }

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

    const Fallback = ({error}) => {
      return <p>{error.message}</p>
    }
  
    // 원하는 컴포넌트를 ErrorBoundary 컴포넌트로 감싼다.
    // 원하는 에러메세지가 따로있다면, fallback이라는 옵션으로 지정가능하다.
  
    const App = () => {
       return <>
        <p>App</p>
      <ErrorBoundary fallback={Fallback}>
        <Child/>
      </ErrorBoundary>
      </>;
    }
  ReactDOM.render(<App />, document.getElementById("root"));

Error Boundary를 통해서 error 요소 컴포넌트의 부모요소는 렌더링을 끝마치게끔하고, fallback 외 다른 값을 대신 렌더링 할 수 있다. 

Fallback은 Error가 났을때 보여줄 컴포넌트라고 대체적으로 부른다.