오류 경계란 무엇입니까?

React Error Boundaries는 예기치 않은 JavaScript 오류가 발생할 때 사용자에게 친숙한 UI를 표시하는 데 사용됩니다.

UI 일부의 JavaScript 오류는 일반적으로 흰색 화면을 렌더링하고 전체 앱을 충돌시킵니다. React 버전 16은 새로운 "Error Boundary"개념으로 이 문제에 대한 솔루션을 도입했습니다.

오류 경계를 어떻게 구현할 수 있습니까?

간단한 2단계로 React 앱에서 React 오류 경계를 구현할 수 있습니다.

오류 경계 구성요소 생성

오류가 발생하기 쉬운 구성 요소를 오류 경계 구성 요소로 래핑합니다

.

오류 경계 구성 요소 생성

A class component becomes an error boundary if it defines either (or both) of the lifecycle methods static getDerivedStateFromError() or componentDidCatch(). Use static getDerivedStateFromError() to render a fallback UI after an error has been thrown. Use componentDidCatch() to log error information. (https://reactjs.org/docs/error-boundaries.html)

다음은 React 문서에서 제공되는 오류 경계 구성 요소의 예입니다.

import React from "react";

class ErrorBoundary extends React.Component {
    constructor(props) {
      super(props);
      this.state = { error: null, errorInfo: null };
    }

    componentDidCatch(error, errorInfo) {
      // Catch errors in any components below and re-render with error message
      this.setState({
        error: error,
        errorInfo: errorInfo
      })
      // You can also log error messages to an error reporting service here
    }

    render() {
      if (this.state.errorInfo) {
        // Error path
        return (
          <div>
            <h2>Something went wrong.</h2>
            <details style={{ whiteSpace: 'pre-wrap' }}>
              {this.state.error && this.state.error.toString()}
              <br />
              {this.state.errorInfo.componentStack}
            </details>
          </div>
        );
      }
      // Normally, just render children
      return this.props.children;
    }  
  }

export default ErrorBoundary;

사용 사례에 따라 더 멋진 UI로 나만의 오류 경계를 만들 수 있습니다.

오류 경계로 래핑

오류 경계로 구성 요소를 래핑할 수 있는 두 가지 방법이 있습니다.

최상위 구성 요소를 래핑할 수 있습니다

.

개별 구성 요소를 래핑할 수 있습니다

.

최상위 구성 요소 래핑

<ErrorBoundary>
    <App/>
</ErrorBoundary>

개별 구성 요소 래핑

이 접근 방식은 앱에 여러 개의 서로 다른 격리된 섹션이 있는 경우 이상적입니다.

<ErrorBoundary>
    <BankingController/>
</ErrorBoundary>
<ErrorBoundary>
    <ProfileController/>
</ErrorBoundary>
<ErrorBoundary>
    <PolicyController/>
</ErrorBoundary>

BankingController에서 발생한 오류는 사용자가 PolicyController 또는 ProfileController를 사용하는 것을 중지하지 않습니다.

이제 내 React 앱에 "흰색 화면"이 없나요?

React 오류 경계는 다음을 제외한 모든 오류를 잡을 수 있습니다.

이벤트 핸들러

비동기 코드

서버측 렌더링

오류 경계 자체에서 발생한 오류

그러나 필요할 때마다 항상 일반 JavaScript try/catch 블록을 사용할 수 있습니다.

As of React 16, errors that were not caught by any error boundary will result in unmounting of the whole React component tree

결론

React 오류 경계는 개발자가 앱을 보다 사용자 친화적으로 만들 수 있는 방법을 제공합니다. 제 생각에는 모든 React 앱은 React 오류 경계를 사용해야 하며 사용자 경험에 큰 차이를 만듭니다.

제 글을 읽어주셔서 감사합니다. 당신이 그것을 즐겼기를 바랍니다. 새로운 것을 배웠다면 좋아요를 누르고 동료 개발자와 기사를 공유하십시오.