React에서 Error Boundary 사용법

 

React는 컴포넌트 기반의 UI 라이브러리로, 각 컴포넌트가 독립적으로 동작하도록 설계되었습니다. 하지만 애플리케이션이 커지면 예기치 못한 오류가 발생할 가능성이 높아집니다. 이때, 오류를 관리하고 사용자 경험을 개선하는 데 도움을 주는 기능이 바로 Error Boundary입니다. 이 글에서는 React의 Error Boundary에 대해 깊이 이해하고, 올바르게 사용하는 방법을 알아보겠습니다.

---

1. Error Boundary란?

**Error Boundary(에러 경계)**는 React 컴포넌트에서 발생한 JavaScript 오류를 감지하고, 애플리케이션의 나머지 부분으로 확산되지 않도록 방지하는 특별한 컴포넌트입니다.

Error Boundary는 다음과 같은 상황에서 사용됩니다:

• 자식 컴포넌트 트리의 렌더링 중 오류
• 생명주기 메서드 실행 중 오류
• React 내부에서 발생한 예외 처리

주의: Error Boundary는 이벤트 핸들러, 비동기 코드, 서버사이드 렌더링(SSR), 또는 기타 비React 코드에서 발생한 오류를 잡지 못합니다.

---

2. Error Boundary의 주요 특징

2.1 사용할 수 있는 React 메서드

Error Boundary는 클래스형 컴포넌트로 구현되며, 다음 두 가지 생명주기 메서드를 이용해 오류를 처리합니다:

• static getDerivedStateFromError(error): 오류 발생 시 컴포넌트의 상태를 업데이트하는 메서드입니다. 주로 오류 발생 여부를 상태에 저장합니다.
• componentDidCatch(error, info): 발생한 오류와 관련된 추가 정보를 로깅하거나 오류 보고 서비스로 전송하는 데 사용됩니다.

2.2 Error Boundary를 사용하지 않는 컴포넌트

Error Boundary는 오직 클래스형 컴포넌트에서만 구현할 수 있습니다. 함수형 컴포넌트에서는 React의 Hooks(예: useErrorBoundary와 같은 커스텀 훅)을 활용해야 합니다.

---

3. Error Boundary의 기본 구현 방법

3.1 간단한 예제

다음은 기본적인 Error Boundary의 구현 예제입니다:

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 상태 업데이트하여 폴백 UI를 렌더링
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 오류 로깅
    console.error('Error occurred:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 폴백 UI 정의
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

3.2 사용법

Error Boundary는 컴포넌트 트리를 감싸는 방식으로 사용됩니다:

import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
}

export default App;

이렇게 하면 MyComponent에서 오류가 발생하더라도 애플리케이션 전체가 중단되지 않고, Error Boundary에서 정의한 폴백 UI가 표시됩니다.

---

4. Error Boundary를 활용한 실전 예제

4.1 오류가 발생할 가능성이 있는 컴포넌트

다음은 오류를 의도적으로 발생시키는 컴포넌트 예제입니다:

import React from 'react';

function BuggyComponent() {
  throw new Error('This is a test error!');
  return <div>Buggy Component</div>;
}

export default BuggyComponent;

4.2 Error Boundary 적용

import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import BuggyComponent from './BuggyComponent';

function App() {
  return (
    <div>
      <h1>React Error Boundary Demo</h1>
      <ErrorBoundary>
        <BuggyComponent />
      </ErrorBoundary>
    </div>
  );
}

export default App;

위 코드에서는 BuggyComponent가 오류를 발생시킬 경우, Error Boundary가 이를 감지하고 폴백 UI를 렌더링합니다.

---

5. Error Boundary 활용 시 주의사항

5.1 이벤트 핸들러 오류 처리

Error Boundary는 이벤트 핸들러 오류를 잡지 못하므로 직접 try-catch 문으로 처리해야 합니다:

function handleClick() {
  try {
    // 오류 발생 가능 코드
    throw new Error('Event handler error!');
  } catch (error) {
    console.error(error);
  }
}

<button onClick={handleClick}>Click Me</button>

5.2 서버사이드 렌더링(SSR)

Error Boundary는 서버사이드 렌더링 환경에서는 동작하지 않으므로 클라이언트 측에서만 적용됩니다.

5.3 성능 최적화

Error Boundary는 애플리케이션의 모든 부분에 적용할 필요는 없습니다. 오류 발생 가능성이 높은 특정 컴포넌트나 섹션에만 적용하는 것이 효율적입니다.

---

6. 커스텀 Hook을 활용한 함수형 컴포넌트 에러 처리

React는 Error Boundary를 클래스형 컴포넌트로만 지원하지만, 커스텀 Hook을 사용하여 함수형 컴포넌트에서 비슷한 기능을 구현할 수 있습니다:

import { useState } from 'react';

function useErrorBoundary() {
  const [error, setError] = useState(null);

  const ErrorBoundary = ({ children }) => {
    if (error) {
      return <h1>Something went wrong.</h1>;
    }

    return children;
  };

  const handleError = (error) => setError(error);

  return { ErrorBoundary, handleError };
}

export default useErrorBoundary;

---

7. 결론

React의 Error Boundary는 복잡한 애플리케이션에서 오류를 효과적으로 관리하고 사용자 경험을 개선할 수 있는 강력한 도구입니다.

• 클래스형 컴포넌트를 사용해 구현할 수 있으며, getDerivedStateFromError와 componentDidCatch 메서드를 활용합니다.
• 효율적인 사용을 위해 특정 섹션에만 적용하고, 이벤트 핸들러나 서버사이드 렌더링 등에서의 한계를 이해해야 합니다.

Error Boundary를 통해 React 애플리케이션의 안정성과 신뢰성을 한층 더 높여보세요!