수입 반응하다 ~에서 “반응”;
const 오류경계 = (보호된 구성 요소: 반응하다.구성 요소 유형) => {
반품 수업 경계 연장하다 반응하다.요소 {
상태 = {
hasError: 거짓,
};
공전 getDerivedStateFromError(오류: 오류) {
콘솔.통나무(“안에”);
반품 { hasError: 진실 };
}
구성 요소DidCatch(오류: 오류, errorInfo: 반응하다.오류 정보): 무효의 {
이것.setState({
hasError: 진실,
});
}
세우다(): 반응하다.ReactNode {
const { hasError } = 이것.상태;
만약에 (hasError) {
반품 <h1>오류가 표시됩니다. 내가 체크해 볼게.h1>;
} 또 다른 {
반품 <보호된 구성 요소 />;
}
}
};
};
내보내다 기본 오류경계;
React 16에 도입된 오류 경계는 주로 getDerivedStateFromError 및 componentDidCatch를 통해 오류를 잡는 방법입니다. 코드를 보면 단순히 클래스에 하나의 오류 상태를 만들고 오류가 포착되면 오류 상태를 true로 만들어 보호하려는 구성 요소가 깨지지 않도록 할 수 있습니다.
가장 큰 장점은 오류가 발생한 구성 요소가 오류가 발생했을 때 반환하려는 구성 요소로 반환되므로 그 어떤 부분에 의해 앱이 손상되지 않는다는 것입니다. 이런 점들을 잘 고려하셔서 반영하시면 좋을 것 같습니다.
부러진 부분을 제외한 뷰를 만들어서 프로젝트의 방향에 따라 적용해보면 더 좋은 방향을 보여줄 수 있을 것 같다는 생각이 듭니다. 그리고 이 오류 경계를 하면서 한가지 팁은 API로부터 받은 데이터가 불안정할 경우 getDerivedStateFromError가 상태 변화로 인한 오류를 잡을 수 있도록 상태로 받아 오류 경계를 관리하는 것입니다.
참조:
React의 Error Boundary를 사용하여 효과적으로 오류 처리 | 카카오엔터테인먼트 FE 기술 블로그
정호일(해리) 카카오페이지에서 웹 프론트엔드를 개발하고 있다. 나는 집에 있는 것보다 밖에 나가는 것을 더 좋아한다.
fe-developers.kakaoent.com
오류 경계 – 반응
사용자 인터페이스 구축을 위한 JavaScript 라이브러리
레거시.reactjs.org