리액트 에러 경계

ko.reactjs.org/docs/error-boundaries.html

에러 경계(Error Boundaries) – React

 

 

에러경계란?

 

- UI의 일부분에 존재하는 자바스크립트 에러가 전체 애플리케이션을 중단시켜서는 안된다. 리액트 사용자들이 겪는 이 문제를 해결하기 위해 React 16에서는 에러 경계라는 새로운 개념이 도입됨.

- 에러 경계는 하위 컴포넌트 트리의 어디에서든 자바스크립트 에러를 기록하며 깨진 컴포넌트 트리 대신 폴백 UI를 보여주는 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; 
  }
}


// jsx내에서 아래와 같이 적용
<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

 

getDerivedStateFromError() 또는 componentDidCatch() 중 하나이상을 정의하면 클래스 컴포넌트 자체가 에러 경계가 된다.

에러정보를 기록하려면 componentDidCatch를 사용한다.

try catch문의 catch 역할을 한다고 보면 된다.

 

 

리액트 16부터 에러 경계에서 포착되지 않은 에러가 발생하면 전체 React 컴포넌트 트리의 마운트가 해제된다. - 리액트 개발자는 손상된 ui를 그대로 남겨두는것보다 삭제하는게 낫다고 판단했다. 손상된 ui를 그대로 남겨두면 누군가에게 잘못된 메시지를 보낼 수 있으니까

 

 

 

 

이벤트 핸들러는 렌더링 중에 발생하지 않으므로 리액트에서 처리할 필요가 없다. 리액트는 여전히 화면에 무엇을 표시해야할 지 알고 있기 때문이다. 이벤트 핸들러 내에서는 try catch문 써라. try catch는 명령형 코드에서 작동한다. 리액트는 선언적이며 무엇을 렌더링할지 구체화한다.

 

 

함수형 컴포넌트에선 아직은 없다. 리액트 훅에 추가할 예정이라고 한다.

reactjs.org/docs/hooks-faq.html#do-hooks-cover-all-use-cases-for-classes