January 15, 2025

Error Boundary란 무엇이며, 왜 사용해야 할까?

답변 확인

Error Boundary란?

Error Boundary는 React에서 자식 컴포넌트 트리에서 발생하는 JavaScript 오류를 포착하고 처리하는 전체 애플리케이션의 중단을 방지하는 특수한 컴포넌트이며 이를 통해 전체 애플리케이션이 중단되는 것을 방지하고, 사용자 경험을 개선할 수 있음

Error Boundary는 클래스형 컴포넌트에서 구현되며, 아래 두 가지 라이프사이클 메서드를 사용

getDerivedStateFromError : 에러 상태 업데이트
componentDidCatch : 에러를 로깅하거나 추가 작업을 수행

왜 사용해야 할까?

애플리케이션 안정성 유지
- 특정 컴포넌트에서 오류가 발생해도 전체 애플리케이션에 크래시 하지 않음
사용자 경험 개선
- 오류가 발생한 영역에 대체 UI제공 하여 사용자에게 전달함
에러 처리 로직의 재사용성
- 여러 컴포너틑를 동일한 Error Boundary를 사용 가능
코드 유지보수성 향상
- 에러처리 로직과 비즈니스 로직 분리

선언형으로 처리한다는 게 무슨 의미이며, 그게 왜 유지 보수성에 도움이 되나? 🤔

선언형 처리란?
- 개발자가 **"어떻게"**보다 "무엇을" 정의하는 방식
- Error Boundary에서 "오류가 발생하면 대체 UI를 보여준다"고 선언적으로 정의하면, 세부 절차는 컴포넌트가 알아서 처리
유지보수성 향상의 이유
- 코드는 직관적이고 간결
- 에러처리 로직과 비즈니스 로직 분리
- 특정 영역에서 에러 처리 방식을 쉽게 파악

예제

대체 UI 제공: 사용자에게 의미 있는 메시지를 보여줌

import React, { Component } from 'react';
 
class ErrorBoundary extends Component {
    state = { hasError: false };
 
    static getDerivedStateFromError(error) {
        return { hasError: true }; // 에러 상태 업데이트
    }
 
    render() {
        if (this.state.hasError) {
            return <h1>오류가 발생했습니다. 다시 시도해주세요.</h1>; // 대체 UI
        }
        return this.props.children; // 정상 렌더링
    }
}
 
function ProblematicComponent() {
    throw new Error('의도적으로 발생한 오류');
}
 
function App() {
    return (
        <ErrorBoundary>
            <ProblematicComponent />
        </ErrorBoundary>
    );
}
 
export default App;

컴포넌트별 에러 처리: 특정 영역만 Error Boundary로 감싸기

<ErrorBoundary>
    <ProductList /> {/* 에러 발생 시 대체 UI로 대체 */}
</ErrorBoundary>

Error Boundary의 한계

비동기 코드 포착 불가:
- setTimeout 또는 Promise 내부에서 발생한 에러는 Error Boundary 포착 x
- 해결 방법: 전역 에러 핸들러(window.onerror 또는 unhandledrejection)를 설정
SSR에서 동작 하지 않음
특정 이벤트 핸덜러의 에러 처리 :
- React DOM 이벤트 핸들러의 에러는 Error Boundary에서 처리되지 않으며, 직접 try...catch를 사용해야 함

결론

Error Boundary는 React 애플리케이션에서 안정성을 높이고, 사용자에게 친화적인 에러 UI를 제공하는 도구

대규모 애플리케이션에서는 중요한 컴포넌트를 Error Boundary로 감싸, 에러가 발생하더라도 나머지 애플리케이션이 정상 작동하도록 설계할 수 있음
"왜 필요한가?" 를 설명할 때는 안정성, 사용자 경험, 유지보수성이라는 키워드를 강조!