Error Boundary가 무엇이며, 이를 사용하는 이유는 무엇인가요?

Error Boundary란?
Error Boundary는 React 컴포넌트에서 발생하는 오류를 잡아내고, 전체 애플리케이션이 다운되는 것을 방지하기 위한 특수한 컴포넌트입니다. 일반적으로 클라이언트에서 오류가 발생할 때 표시할 UI를 제공하여, 애플리케이션의 신뢰성과 사용자 경험을 높이는 데 활용됩니다. 클래스형 컴포넌트의 componentDidCatch와 getDerivedStateFromError 두 가지 라이프사이클 메서드를 사용하여 오류 발생 시의 행동을 정의할 수 있습니다. Error Boundary는 클래스형 컴포넌트에서만 사용할 수 있습니다.

Error Boundary가 필요한 이유
React는 기본적으로 비동기 작업에서 발생하는 오류를 자동으로 처리하지 않으므로, 오류가 발생할 경우 페이지 전체가 하얗게 변하거나 사용자 입장에서 알 수 없는 화면이 표시되는 상황이 발생할 수 있습니다. 이는 사용자 경험을 크게 저해하고, 특히 대규모 애플리케이션에서 신뢰성에 큰 문제가 됩니다. Error Boundary는 이러한 문제를 해결하여 에러가 발생한 영역에서 대체 UI를 표시하고, 애플리케이션의 나머지 부분은 정상적으로 동작하도록 도와줍니다. Error Boundary를 적절히 배치하면, 오류가 발생한 컴포넌트만 대체 UI로 전환되어 애플리케이션의 안정성을 유지하고, 사용자에게 오류 메시지나 대체 화면을 제공하여 더 나은 사용자 경험을 제공합니다. 더불어 Error Boundary는 오류 발생 시의 대체 UI 로직을 선언형으로 작성할 수 있게 하여 코드의 가독성과 유지 보수성을 높이는 데 도움이 됩니다.

선언형으로 처리한다는 게 무슨 의미이며, 그게 왜 유지 보수성에 도움이 되나요? 🤔
선언형으로 처리한다는 의미는, 개발자가 “무엇을 해야 하는지”를 정의하는 방식으로, “어떻게 할지”에 대한 세부적인 절차를 직접 작성하지 않아도 된다는 것을 뜻합니다. 예를 들어, Error Boundary에서 “이 컴포넌트가 오류를 감지하면 특정 대체 UI를 보여준다”와 같은 목적을 코드 상에서 명시함으로써, 실제로 오류가 발생할 때 실행되는 세부적인 절차는 컴포넌트가 알아서 처리하게 됩니다.

유지 보수성에 도움이 되는 이유는, 선언형 코드가 명령형 코드에 비해 직관적이고 간결하여 가독성이 높기 때문입니다. Error Boundary를 예로 들면, 특정 Error Boundary로 감싼 영역이 어떤 방식으로 에러를 처리할지 한 눈에 알 수 있습니다. 또한, 비즈니스 로직과 에러 처리 로직이 명확하게 분리되어 코드의 복잡성이 낮아집니다.