React에서 에러 처리하기

 

React 애플리케이션을 개발하다 보면 다양한 에러 상황에 직면할 수 있습니다. 네트워크 요청 실패, 사용자 입력 오류, 컴포넌트 렌더링 중 에러 등 다양한 유형의 문제가 발생할 수 있습니다. 이를 효율적으로 처리하지 않으면 애플리케이션이 비정상적으로 종료되거나, 사용자가 제대로 된 피드백을 받지 못할 수 있습니다. 이번 글에서는 React에서 에러를 처리하는 방법과 실무에서 사용할 수 있는 전략을 다룹니다.

---

1. 에러 처리의 중요성

React 애플리케이션에서 에러 처리는 다음과 같은 이유로 중요합니다:

1. 사용자 경험 보호: 에러가 발생하더라도 애플리케이션이 완전히 중단되지 않도록 방지합니다.
2. 디버깅 지원: 에러 로그와 메시지를 통해 문제를 빠르게 파악하고 해결할 수 있습니다.
3. 보안 향상: 민감한 정보가 노출되지 않도록 에러 메시지를 제한적으로 보여줍니다.

---

2. React에서 에러 처리 방법

React에서는 컴포넌트 수준에서 발생하는 에러와 비동기 작업에서 발생하는 에러를 각각 처리해야 합니다. 다음은 주요 방법들입니다:

2.1 에러 바운더리 (Error Boundary)

React의 에러 바운더리는 컴포넌트 렌더링 중에 발생하는 JavaScript 에러를 포착하고 UI의 특정 부분을 안전하게 복구할 수 있도록 돕는 기능입니다. 에러 바운더리는 클래스형 컴포넌트에서만 사용할 수 있으며, componentDidCatch와 getDerivedStateFromError 메서드를 제공합니다.

사용 예시:

import React, { Component } from 'react';

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

  static getDerivedStateFromError(error) {
    // 에러가 발생하면 상태를 업데이트합니다.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // 에러 로그를 기록합니다.
    console.error("Error caught by ErrorBoundary:", error, info);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

에러 바운더리 적용:

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

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

export default App;

주의사항:

• 에러 바운더리는 렌더링, 이벤트 핸들러, 비동기 작업에서는 에러를 잡지 못합니다.
• 이러한 에러는 별도로 처리해야 합니다.

---

2.2 비동기 에러 처리

비동기 작업(예: API 요청) 중 발생하는 에러는 try...catch 블록이나 .catch() 메서드를 사용하여 처리합니다.

사용 예시:

import React, { useState, useEffect } from 'react';

function FetchData() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      }
    };

    fetchData();
  }, []);

  if (error) {
    return

Error: {error}

;
  }

  if (!data) {
    return

Loading...

;
  }

  return

{JSON.stringify(data)}

;
}

export default FetchData;

네트워크 에러 처리 전략:

• 에러 메시지를 사용자 친화적으로 변환하여 표시합니다.
• 백엔드의 응답 코드를 기반으로 적절한 대응을 설계합니다.

---

2.3 전역 에러 처리

애플리케이션의 전역에서 에러를 처리하려면 다음과 같은 방법을 사용할 수 있습니다:

2.3.1 Window 객체의 error 이벤트

window.onerror = function (message, source, lineno, colno, error) {
  console.error("Global error caught:", message, source, lineno, colno, error);
};

2.3.2 React의 ErrorBoundary와 연계

전역적으로 발생하는 에러를 포착한 후 이를 ErrorBoundary로 전달하여 UI를 복구할 수 있습니다.

---

3. 에러 처리 UI 디자인

에러 처리 시 사용자 경험을 향상시키기 위해 적절한 UI를 제공해야 합니다. 다음은 주요 전략입니다:

1. 명확한 에러 메시지 제공:
   • 기술적인 디테일을 숨기고 사용자가 이해할 수 있는 언어로 에러를 설명합니다.

   if (error.response.status === 404) {
     setError('요청한 데이터를 찾을 수 없습니다.');
   } else {
     setError('일시적인 문제가 발생했습니다. 다시 시도해 주세요.');
   }

2. 재시도 버튼 제공:
   • 사용자에게 에러 상황을 복구할 수 있는 옵션을 제공합니다.

   <button onClick={() => fetchData()}>다시 시도</button>

3. Fallback UI 제공:
   • 앱이 최소한의 기능을 유지할 수 있도록 대체 UI를 제공합니다.

   if (hasError) {
     return <FallbackComponent />;
   }

---

4. 결론

React에서 에러 처리는 애플리케이션의 안정성과 사용자 경험을 향상시키는 데 필수적인 요소입니다. 에러 바운더리, 비동기 에러 처리, 전역 에러 핸들링 등의 기술을 활용하면 다양한 에러 상황에 유연하게 대응할 수 있습니다. 프로젝트에 적합한 에러 처리 전략을 설계하여 더욱 안정적인 애플리케이션을 개발해 보세요!