[Front end] React 16 #4 Error Boundaries

 

리액트 16의 세 번째 멋진 기능은 Error Boundaries이다. 직역하면 에러 경계이다. 이건 컴포넌트 자식의 에러를 관리할 수 있게 해 준다. 만약 포털이 에러를 만들면, 앱으로 관리할 수 있다. return types을 에러로 만들면, 동일하게 관리할 수 있다. 정상 작동할 경우에는 자식의 에러에만 한정된다.

ErrorMaker 컴포넌트를 만들고 freinds에 몇 가지 이름을 넣어보자. 아래와 같이 렌더가 정상적으로 되었다. 이제 에러를 발생시켜보자.

componentDidMount에서 setTimeout을 사용하여 1초 후 friends에 undefined를 할당해보자.

개발을 하다 보면 일반적이고 흔히 볼 수 있는 화면이다. 하지만 이런 화면은 사용자 입장에서는 불편하다. 에러를 잡아보자.

에러를 주고 에러 정보도 받을 수도 있다. console.log로 확인해 보면 에러를 구분하고 에러를 대응할 수 있다.

예시로 에러를 일부러 만들어 catch 해 보았다. 에러가 실제 발생하였지만 사용자는 간단한 메시지와 함께 어플리케이션은 정상 작동할 것이다.

 

하지만 모든 에러를 아래와 같이 catch하는 것은 비 효율적이다.

에러를 효율적이게 catch 하기위해서는 higher-order component로 원하는 컴포넌트에 대한 에러를 제어 할 수 있다.

컴포넌트에서 컴포넌트를 리턴하는 구조이다. BoundaryHOC를 통해 컴포넌트를 랩핑하고 있다. HOC에 의해 컴포넌트가 보호된다.