ERROR BOUNDARY 다루기(ErrorBoundary + react-error-boundary)

• React16에서 도입된 ErrorBoundary는 하위 컴포넌트 트리에서 발생한 에러를 잡아 선언적으로 처리할 수 있는 컴포넌트로, 오류를 기록하고 깨진 컴포넌트 대신 Fallback UI를 보여준다. 이는 두 가지 메서드인 `static getDerivedStateFromError()`와 `componentDidCatch()`를 정의하며, 이벤트 핸들러, 비동기적 코드, 서버 사이드 렌더링, ErrorBoundary 컴포넌트 자체에서 발생하는 에러는 핸들링하지 않는다.

• ErrorBoundary를 사용하는 방법 중 하나는 클래스를 생성하여 처리하는 것으로, 이를 위해 ErrorBoundaryProps와 ErrorBoundaryState 인터페이스를 정의하고, 이를 활용해 ErrorBoundary 클래스를 생성한다. 이 클래스는 에러를 처리하고 대체 UI를 표시하는 역할을 한다.

• `ErrorBoundary` 컴포넌트는 React에서 에러를 처리하는 방법 중 하나로, 클래스형 컴포넌트에서 사용할 수 있다. 이를 활용하면 에러가 발생한 컴포넌트를 대체하여 사용자에게 에러 메시지를 보여주거나, 에러에 대한 로그를 남기는 등의 작업을 할 수 있다.

• `react-error-boundary`는 `ErrorBoundary`를 확장한 라이브러리로, 함수형 컴포넌트에서도 에러 처리를 할 수 있게 해준다. 이 라이브러리를 사용하면 전역 에러 핸들링과 커스텀 에러 UI를 쉽게 구현할 수 있다.