과거 자바스크립트 에러가 React의 내부를 훼손하고, 암호화 에러를 뱉어내서 문제가 되었습니다.
Error Boundaries의 소개
UI의 일부분 에러가 전체 애플리케이션을 중단시켜서는 안되기 때문에 React 16에서부터 Error Boundary라는 개념을 도입했습니다.
단 아래 경우에는 에러를 포착하지 않습니다.
•
이벤트 핸들러
•
비동기적 코드
•
서버사이드 렌더링
•
자식이 아닌 error boundaries 자체에서 발생하는 에러
<ErrorBoundary>
...
</ErrorBoundary>
JavaScript
복사
Error boundary배치 위치
개발자가 결정할 사항인데, 전체를 감쌀수도 있고, 일부 컴포넌트만 감싸서 처리할 수 있습니다.
포착되지 않는 에러에 대한 새로운 동작
React16에서부터 잡히지 않는 에러가 발생하면 컴포넌트 트리의 마운트가 해제될 수 있습니다.
손상된 UI는 잘못된 정보를 전달할 수 있기 때문에 완전히 제거하는 편이 더 좋습니다. 따라서 Error boundary를 추가해 더 좋은 사용자 경험을 제공할 수 있습니다.
컴포넌트 스택 추적
개발모드에서 Error boundary가 있다면 에러 메시지를 제공합니다.
try/catch는 어떤가요?
명령형 코드에서만 동작하기 때문에 컴포넌트안에서 발생하는 에러는 잡을 수 없습니다.
이벤트 핸들러는요?
이건 잡지 않기 때문에 내부의 try catch를 사용해야합니다.