React 에러 처리 완전정복｜Error Boundary로 안전한 앱 만들기 (실전 예제 포함)

📘 리액트 스터디 시리즈 11편

에러 처리와 에러 바운더리 완전정복｜실전에서 필요한 예외 처리 기술

여러분, 앱이 갑자기 뻗어버리는 경험 있으셨나요? 😵 실서비스에서는 사용자의 잘못된 입력, API 실패 등 다양한 상황에서 에러 처리가 매우 중요합니다.

이번 편에서는 리액트에서의

에러 처리 방법

과

에러 바운더리(Error Boundary)

개념을 배워봅니다 🔐

---

🔍 1. 에러는 언제 발생하나요?

JS에서는 예외가 발생하면 try/catch로 잡을 수 있습니다. 하지만 리액트 컴포넌트 내부의 렌더링 중 오류는 catch로 잡을 수 없습니다!

try {
  // 일반 함수 에러는 잡힘
  throw new Error("문제 발생!");
} catch (e) {
  console.error("에러 잡힘:", e);
}

하지만 React 컴포넌트 렌더링 중 발생한 에러는 Error Boundary로 감싸야 안전합니다.

---

🛡️ 2. Error Boundary란?

에러 바운더리는 컴포넌트 트리에서 하위 컴포넌트에서 발생하는 에러를 잡고 앱 전체가 뻗지 않도록

fallback UI

를 보여주는 역할을 합니다.

📌 클래스 컴포넌트로만 작성할 수 있습니다.

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

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.error("에러 로그:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h2>문제가 발생했습니다. 나중에 다시 시도해주세요.</h2>;
    }

    return this.props.children;
  }
}

---

🔗 3. ErrorBoundary 사용 방법

아래처럼 문제가 발생할 가능성이 있는 컴포넌트를 감싸줍니다.

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

이렇게 하면 MyComponent에서 에러가 발생해도 앱 전체가 멈추지 않고 fallback UI만 보여집니다 👌

---

🧪 4. 예제 - 고의로 에러 발생시켜보기

function BuggyComponent() {
  throw new Error("이 컴포넌트는 에러가 납니다!");
}

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

📌 콘솔에 에러 로그가 찍히고, 화면에는 fallback UI가 보여집니다.

---

🧠 5. 커스텀 fallback UI 만들기

에러 바운더리에서 fallback UI를 커스터마이징할 수 있습니다.

class ErrorBoundary extends React.Component {
  ...
  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h2>앗! 문제가 발생했어요 😥</h2>
          <button onClick={() => window.location.reload()}>새로고침</button>
        </div>
      );
    }
    return this.props.children;
  }
}

---

📌 요약 – 에러 처리 핵심

• ✔️ JS 에러는 try/catch, React 렌더링 에러는 ErrorBoundary
• ✔️ 클래스 컴포넌트로만 작성 가능
• ✔️ 실서비스에서는 필수로 적용해야 함

---

📌 다음 편 예고

12편에서는 React 앱 배포 전략을 다룹니다! Vite, Netlify, Vercel까지 실제로 올려보며 배포까지 마무리해봐요 🚀

---

💬 에러는 두려운 것이 아닙니다! 제대로 잡으면 든든한 방패가 되죠 🛡 궁금한 점은 언제든 댓글로 남겨주세요 😊