리액트(컴포넌트) 에러처리 ErrorBoundary ... class...

JS에서 try/catch를 사용한 것 처럼 리액트에서 에러를 다루는 ErrorBoundary를 사용해보려고 한다.

class문법으로 생긴걸 보고 정이 가지 않았지만..

---

왜 ErrorBoundary를 사용해야할까?

try/catch

- 코드 블록 내에서 발생하는 오류를 처리한다.

- 이벤트 핸들러, 비동기 코드, ssr 등등에서 try/catch를 사용한다.

 

ErrorBoundary

- 우리는 React를 통하여 컴포넌트를 사용하여 구현한다.

여기서 컴포넌트중 하나가 에러가 발생하게 되면?

한곳에서 발생하게 되는 에러때문에 App은 멈추게 될것이다.

- try/catch를 사용했던것처럼 리액트에서는 Error Boundary를 통해서 에러를 핸들링 할 수 있다.

- 쉽게말하면 렌더링 또는 하위 구성 요소에서 발생하는 오류를 감지하고 처리하는데 사용한다.

- 비동기 처리도 가능은 하다.

 

---

ErrorBoundary 사용방법

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;
  }
}

- state값이 error가 되면 컴포넌트를 중지시키는게 아닌 에러 대응 컴포넌트를 넘겨줄 수 있다.

 

 

에러 경계(Error Boundaries) – React

공식문서에 나오는 사용법을 다시 살펴보자

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

  static getDerivedStateFromError(error) {
    // 다음 렌더링에서 폴백 UI가 보이도록 상태를 업데이트 합니다.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 에러 리포팅 서비스에 에러를 기록할 수도 있습니다.
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 폴백 UI를 커스텀하여 렌더링할 수 있습니다.
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

static getDerivedStateFromError

- 하위 컴포넌트 렌더링 중에 에러가 발생하게 되면 오류 상태를 가져온다.

- 그 상태에 따라서 render에서 state값을 통해서 에러 대응 컴포넌트를 하위컴포넌트에 나타낸다.

- 렌더 단계에서 호출된다. 그렇기 때문에 내부에는 side effects가 발생할 만한 작업을 해서는 안 된다.

 

 

componentDidCatch

- 그 후 errorInfo 에러 정보를 받아온다.

- 커밋 단계에서 호출된다. 내부에는 side effects가 발생해도 된다.

---

사용 예시

<ErrorBoundary fallback={<p>에러가 나타났다</p>}>
	<Child />
</ErrorBoundary>

- 에러가 발생하면 처리할 하위 컴포넌트를 ErrorBoundary로 감싸준다.

- fallback={}내부에 실행할 코드를 넣을 수 있다.

 

const Child = () => {
  throw new Error("에러입니다");
  return <p>Child...</p>;
};

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

function App() {
  return (
    <div className="App">
      <p>App</p>
      <ErrorBoundary fallback={Fallback}>
        <Child />
      </ErrorBoundary>
    </div>
  );
}

- Fallback 함수를 만들어서 에러 대응 컴포넌트를 만들어서 return 할 수 도 있다.

---

ErrorBoundary를 보고 Redux를 사용하면 사용하지 않아도 되는거 아닐까? 라는 생각을 했다.

두개는 다르다.

Redux는 상태 관리를 하는데에서 사용을 하는거지만

ErrorBoundary는 컴포넌트 렌더링 시 에러가 생기면 대응할 수 있다.

 

Redux와 ErrorBoundary를 함께 사용해서 에러 핸들링을 보다 쉽게 할 수 있을것 같다는 생각을 했다.

아직까지 사용해보고 대응해보지 않았지만 사이드프로젝트를 진행하며 대응하는 예시들을 다시 한번더 작성해보도록 해야겠다.