Error Boundaries

Error Boundaries

에러 경계(Error Boundaries) – React

과거 자바스크립트 에러가 React의 내부를 훼손하고, 암호화 에러를 뱉어내서 문제가 되었습니다.

Error Boundaries의 소개

UI의 일부분 에러가 전체 애플리케이션을 중단시켜서는 안되기 때문에 React 16에서부터 Error Boundary라는 개념을 도입했습니다.

단 아래 경우에는 에러를 포착하지 않습니다.

• 이벤트 핸들러
• 비동기적 코드
• 서버사이드 렌더링
• 자식이 아닌 error boundaries 자체에서 발생하는 에러

<ErrorBoundary>
...
</ErrorBoundary>

Error boundary배치 위치

개발자가 결정할 사항인데, 전체를 감쌀수도 있고, 일부 컴포넌트만 감싸서 처리할 수 있습니다.

포착되지 않는 에러에 대한 새로운 동작

React16에서부터 잡히지 않는 에러가 발생하면 컴포넌트 트리의 마운트가 해제될 수 있습니다.

손상된 UI는 잘못된 정보를 전달할 수 있기 때문에 완전히 제거하는 편이 더 좋습니다. 따라서 Error boundary를 추가해 더 좋은 사용자 경험을 제공할 수 있습니다.

컴포넌트 스택 추적

개발모드에서 Error boundary가 있다면 에러 메시지를 제공합니다.

try/catch는 어떤가요?

명령형 코드에서만 동작하기 때문에 컴포넌트안에서 발생하는 에러는 잡을 수 없습니다.

이벤트 핸들러는요?

이건 잡지 않기 때문에 내부의 try catch를 사용해야합니다.