자식 렌더링 오류를 기능 단위로 격리하고 대체 UI를 제공합니다.
Error Boundary는 자식 트리의 렌더와 생명주기 오류를 잡습니다. 이벤트와 비동기 callback 오류는 별도 처리해야 합니다.
전체 앱 하나보다 복구 가능한 기능 경계에 배치합니다.
사용자 안내와 내부 오류 관측 정보를 분리합니다.
오류를 빈 화면으로 숨기면 사용자 복구와 장애 발견이 모두 어렵습니다.
로컬 프로젝트에서 확인해보세요다시 시도 버튼으로 경계 상태를 초기화하세요.
import React from "react";
class Boundary extends React.Component {
state = { failed: false };
static getDerivedStateFromError() {
return { failed: true };
}
render() {
return this.state.failed ? <p role="alert">위젯 오류</p> : this.props.children;
}
}
function Widget() {
throw new Error("렌더 실패");
}
export default function App() {
return (
<main>
<h1>대시보드</h1>
<Boundary>
<Widget />
</Boundary>
<p>다른 기능은 유지됩니다.</p>
</main>
);
}