에러 경계(Error Boundaries)

https://ko.reactjs.org/docs/error-boundaries.html를 읽고 정리한 글입니다

 

• UI 일부분에 존재하는 JS 에러가 애플리케이션 전체를 중단시키지 않기 위해 React 16에 도입된 개념
• 하위 컴포넌트 트리의 어디에서든 자바스크립트 에러를 기록하며 깨진 컴포넌트 트리 대신 폴백 UI를 보여주는 React 컴포넌트
• 이벤트 핸들러, 비동기적 코드, 서버 사이드 렌더링, 자식이 아닌 에러 경계 자체에서 발생하는 에러는 포착하지 않는다
• JS의 catch { } 구문과 유사
• 에러 경계는 최상위 경로 컴포넌트를 감싸거나 각 위젯을 감싸는 등 개발자가 선택한다
• React 16부터는 컴포넌트의 스택 추척 기능을 제공하며, 또한 에러 경계에서 포착되지 않은 에러로 인해 전체 React 컴포넌트 트리의 마운트가 해제된다 ⇒ 손상된 UI는 없애는 게 낫기 때문
• 에러 경계는 이벤트 핸들러 내부에서는 에러를 포착하지 않는다 ⇒ 이벤트 핸들러 내부에서 에러를 잡으려면 try / catch 구문 사용할 것
• React 15에서는 unstable_handleError, 그 이후는 componentDidCatch 사용