🔗ErrorBoundary

React16 이후에 생긴 개념임.
React는 예외 발생시 모든 컴포넌트를 unmount 하기 때문에,
일부분에 에러로 인해 전체 App이 중단되는데,
이를 해결 하고자 도입되었음.

정의

문서적인 정의는
하위 컴포넌트 트리의 어디에서든 자바스크립트 에러를 기록하며 깨진 컴포넌트 트리 대신 폴백 UI를 보여주는 React 컴포넌트 임.

즉, ErrorBoundary를 사용해서 에러처리를 하게되면,
하위 컴포넌트 어디서든 자바스크립트적인 에러가 발생하면
그 에러를 기록하거나, 해당 에러에 대한 대체 UI를 랜더링을 (혹은 둘다)
하는 방식 으로 에러를 대처한다.

작동 방식

문서에 따르면, 최상위 경로의 컴포넌트를 감싸서 사용자에게 에러메세지를 노출시킬 수도 있고,
App내의 widget들을 감싸서 나머지 부분이 충돌하지 않도록 보호할 수도 있음.

Method

1. 🔗componentDidCatch()
   해당 method는 2개의 매개변수를 전달 받음.
   보통 Fallback UI를 랜더링하는거 보단,
   error reporting에 사용됨.

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  state = {
    error: false
  };

  componentDidCatch(error, info) {
    console.log('에러가 발생했습니다.');
    console.log({
      error,
      info
    });
    this.setState({
      error: true
    });
  }

  render() {
    if (this.state.error) {
      return <h1>에러 발생!</h1>;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;


//app.js
function App() {
  return (
    <ErrorBoundary>
      <User />
	</ErrorBoundary>
  );
}

2. 🔗static getDerivedStateFromError()
   보통 componentDidCatch 사용되어서, componentDidCatch는 error reporting,
   getDerivedStateFromError는 Fallback UI를 렌더링하는데 사용됨.

class ErrorBoundary extends React.Component {
  state = {
    error: false
  };

  static getDerivedStateFromError(error) {
    return { error: true };
  }

  render() {
    if (this.state.error) {
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

//app.js
<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>