ErrorBoundary

리액트는 렌더링시 오류가 발생할 경우 오류가 발생했떤 일부 컴포넌트만 렌더링을 하지않는 것이 아니라 전체 화면 모두를 아예 렌더링하지 않는다. 잘못된 화면을 사용자에게 보여주는 것 보다는 아예 보여주지 않는것이 더 나은 사용자 경험이라는 판단에서이다.

 

오류를 만나면 흰화면을 보여주는 것이 그 떄문이다.

예기치 못한 오류가 발생할 경우에 대한 대비책으로서 적어도 흰화면보다는 준비도니 시스템 장애화면을 보여주는 것이 조금더 나은 UX임에는 분명하다.

 

이렇게 시스템 장애 화면을 따로 정의하여 보여주고자 한다면, 아래 ErrorBoundary 컴포넌트를 이용할 수 있다.

ErrorBoundary는 클래스 컴포넌트의 componentDidCatch 생명주기 함수를 이용하여 아래와 같이 작성할 수 있다.

 

 

 

나는 먼저 내 프로젝트에 react-error-boundary 를 설치하겠다.

 

런타임에 문제가 생기면 에러페이지가 뜬다.

 

 

 

 

// 이건 또 다른건데, notfound가 왜 뜨지않는지 모르겠음

 

 

참고

https://min9nim.vercel.app/2021-01-15-react-error-boundary/

[React] ErrorBoundary