React의 오류 처리

소개하다.

이 문서에서는 React의 오류 처리에 대한 기초 지식을 소개합니다.본문 말미에서 당신은 다음과 같이 해야 한다.

잘못된 경계가 무엇인지, 잘못된 경계를 어떻게 세우는지 안다.

React 구성 요소의 오류 처리 단계에 관련된 두 가지 방법을 이해한다. - componentDidCatch(error, info)와 static getDerivedStateFromError(error)

더 나은 개발자 되기😁

들어가자.

오류 경계: 네?

오류 경계는 클래스 구성 요소입니다. React 구성 요소 트리의 모든 위치에서 실행 중 오류를 포착하고, 이러한 오류가 발생했을 때 리셋 보기 (사용자 인터페이스) 를 표시합니다.일반적으로 한 가지 또는 두 가지 방법(라이프 사이클)을 구현합니다. - componentDidCatch 또는 getDerivedStateFromError

오류 경계: 원인.

런타임 시 오류가 발생하면 React가 기본적으로 전체 구성 요소 트리를 제거하여 애플리케이션이 중단되고 오류 메시지가 표시됩니다.

예를 들어 전자상거래 응용 프로그램우리는 고객이 응용 프로그램에 오류가 발생했을 때 그들의 장치에 유사한 것이 나타나는 것을 절대 원하지 않는다.반대로, 우리는 (미리) 반환 보기를 준비하고, 생산 과정에서 오류가 발생할 때 이 보기를 보여 주기를 바란다.우리는 잘못된 경계를 통해 이 점을 실현할 수 있다.

componentDidCatch 및 getDerivedStateFromError

이것은 잘못된 경계에서 실현되는 두 가지 생명주기 방법이다.다시 생각해 보면, 오류 경계는 단지 React 클래스 구성 요소일 뿐이다.getDerivedStateFromError 오류 발생 시 예비(fallback) 뷰를 표시하는 데 사용됩니다.componentDidCatch 오류 정보를 기록하는 데 사용됩니다.

우리로 하여금 잘못된 경계를 세우게 하다

우선, 우리는 Demo 파일에 Demo.js라는 구성 요소를 만들고 App.js 파일에 이 구성 요소를 불러옵니다.Demo 간단한 뷰만 렌더링할 수 있습니다.Demo.js :

import React from 'react'
import './Demo.css'

const Demo = (props)=>{
    if(props.theme === "white"){
        throw new Error("An error occurred");
    }

    return (
        <section>
            <h1>This is a {props.theme} text</h1>
        </section>
    )

}

export default Demo;

App.js :

import React from 'react';
import Demo from './Demo'


const App = ()=>{

  return (
    <div className="App">
      <Demo  theme="black" />
    </div>
  )
}

export default App

출력:

이제 Demo에 App의 두 가지 실례를 다시 마운트합시다.우리는 현재 Demo 중 모두 세 개의 App 구성 요소가 있다.세 개의 구성 요소 중 하나가 오류를 던질 것이다.

import React from 'react';
import Demo from './Demo'


const App = ()=>{

  return (
    <div className="App">
      <Demo  theme="black" />
      <Demo  theme="black" />
      <Demo  theme="white" />
    </div>
  )
}

export default App

이렇게 하면 전체 애플리케이션이 충돌합니다.

우리는 프로그램 전체가 하나의 (또는 몇 개) 구성 요소 오류로 인해 붕괴되기를 원하지 않는다.반대로, 우리는 이 구성 요소를 잘못된 경계로 포장한다.잘못된 경계를 사용하여 이런 구성 요소를 포장하면 이 구성 요소에만 영향을 주고 처리할 수 있습니다.나머지 구성 요소는 여전히 영향을 받지 않습니다.
말 그대로 잘못된 경계, 오류를 둘러싸고 경계를 설정하고 있습니다.😃
이제 우리의 잘못된 경계를 계속 세웁시다!텍스트 편집기로 돌아가 새 파일을 만듭니다.네가 어떻게 말하든지 다 괜찮다.근데 나한테 전화할게. ErrorBoundary.jsErrorBoundary.js에서 ErrorBoundary라는 클래스 구성 요소를 만듭니다.

import React, { Component } from 'react'

class ErrorBoundary extends Component{
    constructor(props){
        super(props)

        this.state = {
            throwsError: false
        }
    }

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

    componentDidCatch(error, info){
        console.log(error);
        console.log(info);
    }

    render(){
        if(this.state.throwsError){
            return (
                <h1>Oops! An error occurred</h1>
            )
        }

        return this.props.children;
    }
}

export default ErrorBoundary

이후에 나는 나의 ErrorBoundary 구성 요소를 App로 가져오고 Demo로 세 개의 ErrorBoundary 구성 요소를 포장할 것이다.

import React from 'react';
import Demo from './Demo'
import ErrorBoundary from './ErrorBoundary'


const App = ()=>{

  return (
    <div className="App">
      <ErrorBoundary>
        <Demo  theme="black" />
        <Demo  theme="black" />
        <Demo  theme="white" />
      </ErrorBoundary>
    </div>
  )
}

export default App;

출력:
주의: 개발 환경에서 우리는 여전히 오류를 볼 수 있습니다.React에서 오류의 출처를 알고 프로그램을 구축할 때 오류를 복구하기를 원하기 때문입니다.잘못된 경계는 생산 환경에서만 유용하다.그래서 이것은 일종의 의도적인 행위이다.

그러나 오른쪽 위에 있는 닫기 버튼을 클릭하여 실행 중인 예비(fallback) 뷰를 볼 수 있습니다.

우리는 우리의 후퇴시도가 어떻게 우아하게 나타나는지 볼 수 있다.너는 마음대로 예비 사용자 인터페이스를 사용할 수 있다.

ErrorBoundary 구성 요소 소스 코드를 살펴보겠습니다.

클래스에서 우리는 어떤 상태로 클래스를 초기화하는 constructor를 정의했다.this.state 대상에서 우리는 처음에 상태 속성throwsError을 false으로 설정했다.
다음에 우리는 방법을 정의한다static getDerivedStateFromError(error).이 방법은 매개 변수 error 를 수신합니다.함수체에서 우리는 새로운 상태 대상을 되돌려주었는데 그 속성throwsError은 true로 설정되었다.구성 요소가 오류를 던질 때마다 이 새 상태 대상은 this.state.throwsError ((false 에서 constructor 로 처음 설정) 을 true 로 변경하는 데 사용됩니다.
상태 변화(this.state.throwsError)는 재로드 프로그램 라이프 사이클을 트리거하여 예비(fallback) 뷰를 표시합니다.render() 방법에서 필요한 반환 보기h1 표시를 만들고 this.state.throwsError가 true일 때 표시를 표시합니다.또는 오류가 없을 때 실제 서브어셈블리를 표시합니다(this.props.children.componentDidCatch 방법에서는 오류와 오류 정보를 콘솔에 기록하기만 하면 됩니다.

너는 반드시 잘못의 경계를 어디에 두어야 합니까?

우리가 처음에 한 것은 우리의 오차 경계로 모든 Demo 구성 요소를 묶는 것이다.따라서 오류 경계 내의 모든 구성 요소에 오류가 발생하면 오류 경계 내의 모든 구성 요소(건강 구성 요소 포함)가 숨겨지고 예비(fallback) 뷰가 표시됩니다.이상적이지 않다!
오류 경계로 각각 Demo 구성 요소를 분리해야 고장난 구성 요소만 되돌아오는 보기에 숨겨집니다.
각 구성 요소App.js를 잘못된 경계로 포장하여 파일Demo을 편집합니다.

import React from 'react';
import Demo from './Demo'
import ErrorBoundary from './ErrorBoundary'


const App = ()=>{

  return (
    <div className="App">
      <ErrorBoundary>
        <Demo  theme="black" />
      </ErrorBoundary>

      <ErrorBoundary>
        <Demo  theme="black" />
      </ErrorBoundary>

      <ErrorBoundary>
        <Demo  theme="white" />
      </ErrorBoundary>
    </div>
  )
}

export default App;

이제 세 번째 Demo 구성 요소 (오류가 있음) 만 백엔드 보기에 숨겨진 것을 볼 수 있습니다.

잘못된 경계의 위치는 완전히 당신이 결정합니다.그러나 격리 구성 요소는 합리적이다. 이렇게 하면 한 개 혹은 몇 개의 구성 요소가 오류를 던질 때 다른 구성 요소는 영향을 받지 않는다.

결론

지난 몇 분 동안 우리는 잘못된 경계가 무엇인지, 그리고 그것이 실현되는 생명주기 방법을 이해했다.react 프로그램에서 그것을 만들고 사용하는 방법도 알고 있습니다.프로젝트의 오류를 처리하는 기본 기술이 생겼으면 좋겠어요.✨✨