• 이번 작업을 진행하면서 생겨나는그 모든 에러를 모두 직접 대응해 오류로 튕겨주는 작업이 번거로웠음.
• 사용자 경험을 위해 예상치 못한 에러가 발생했을 때에도 사용자가 흰 화면을 마주하지 않도록 에러 바운더리로 에러 핸들링을 진행했다.

에러바운더리 ⚠️

• 리액트 프로젝트시에 사용되는 컴포넌트 에러를 핸들링하는 방법 🌀

  • 리액트는 jsx를 렌더링하는 도중 에러를 만나면 컴포넌트 렌더링을 멈추고 해당 UI를 화면에서 제거한다. 그 상황에서 사용자는 흰색 빈화면을 마주치게 되며, 다음 액션에 대한 안내 없이 사용자는 덩그러니 에러 속에 놓이게 된다.

• 이렇게 컴포넌트가 안보이는 경우 fallback Component를 보여주도록 하는 것이 Error Boundary.

  *fallback? 어떤 기능이 약해지거나 제대로 동작하지 않을 때, 이에 대처하는 기능 또는 동작

ErrorBoundary랑 try-catch문으로 에러 핸들링하는 것의 차이?

try {
	console.log("done")
} catch (error) {
	console.error
}

• 위와 같은 try-catch는 명령적으로 어떻게 에러를 핸들링 할지에 더 집중하는 방법.
• ErrorBoundary는 선언적으로 무엇으로 에러를 핸들링 할지에 더 집중하는 방법.

React 합성 컴포넌트

• 생명주기 함수인 getDerivedStateFromError()와 componentDidCatch()를 정의한 클래스형 컴포넌트를 만들어야 하므로 현재는 클래스형 컴포넌트로만 작성 가능하다
• 둘 중 하나를 정의해 만든 클래스형 컴포넌트가 에러 바운더리로 동작한

→ 클래스형 컴포넌트로 만든 에러바운더리

클래스형 컴포넌트로 코드를 작성해본 적이 없어 난감하던 중 react 공식 문서에서 아래와 같은 메모 발견!