10.React Error Boundaries 완벽 가이드: 컴포넌트 에러 처리 메커니즘

"React Error Boundaries 완벽 가이드: 컴포넌트 에러 처리 메커니즘"

---

1시간 분량 강의안 (Error Boundaries 기초)

강의 목표

1. React Error Boundaries의 개념과 필요성을 이해한다.
2. 클래스형 컴포넌트에서 Error Boundaries를 구현하는 방법을 학습한다.
3. Error Boundaries의 한계를 이해하고 실습을 통해 활용 방법을 익힌다.

---

강의 목차

---

1. React Error Boundaries란? (10분)

Error Boundaries의 정의

• React에서 컴포넌트 트리 내에서 렌더링 중 발생하는 JavaScript 에러를 처리하기 위한 메커니즘입니다.
• 컴포넌트 전체 트리가 깨지는 것을 방지하고, 에러가 발생한 컴포넌트를 분리해 사용자에게 대체 UI를 표시합니다.

필요성

• React 애플리케이션에서 에러로 인해 전체 화면이 중단되는 상황을 방지.
• 디버깅에 도움을 주며, 사용자 경험을 개선.

Error Boundaries의 주요 메서드

1. componentDidCatch(error, info): 발생한 에러와 에러가 발생한 컴포넌트의 정보를 캡처.
2. static getDerivedStateFromError(error): 에러 발생 시 대체 UI를 렌더링하기 위해 상태를 업데이트.

Error Boundaries의 제한 사항

• 이벤트 핸들러, 비동기 코드, 서버 사이드 렌더링, 또는 에러 발생 전 React 외부에서 실행되는 코드에는 적용되지 않습니다.

---

2. Error Boundaries 구현 방법 (20분)

1단계: Error Boundary 컴포넌트 작성

• 클래스형 컴포넌트를 사용해 Error Boundary를 작성합니다.

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, errorInfo) {
    // 에러 로깅
    console.error("Error caught by ErrorBoundary:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 에러 발생 시 표시할 UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

2단계: Error Boundary로 컴포넌트 감싸기

• 에러가 발생할 수 있는 컴포넌트를 Error Boundary로 감쌉니다.

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

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

export default App;

3단계: 에러를 발생시키는 컴포넌트

• 에러를 의도적으로 발생시켜 테스트합니다.

import React, { Component } from 'react';

class BuggyComponent extends Component {
  render() {
    // 의도적으로 에러 발생
    throw new Error("I crashed!");
  }
}

export default BuggyComponent;

• 결과: 에러 발생 시 "Something went wrong." 메시지가 표시됩니다.

---

3. Error Boundaries 활용 (15분)

1단계: 사용자 친화적인 대체 UI

• 에러 발생 시 사용자 경험을 고려한 UI를 표시합니다.

render() {
  if (this.state.hasError) {
    return (
      <div>
        <h1>문제가 발생했습니다.</h1>
        <p>잠시 후 다시 시도해주세요.</p>
      </div>
    );
  }

  return this.props.children;
}

2단계: 에러 로깅 서비스 연동

• componentDidCatch에서 Sentry와 같은 에러 로깅 서비스를 연동합니다.

componentDidCatch(error, errorInfo) {
  logErrorToMyService(error, errorInfo);
}

3단계: Error Boundaries를 여러 레벨에서 사용

• 특정 컴포넌트 트리에만 에러 처리를 적용할 수도 있습니다.

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

---

4. 실습 과제 (10분)

실습 과제

1. Error Boundary를 작성하여 "문제가 발생했습니다"라는 메시지를 표시하세요.
2. 에러가 발생한 컴포넌트 이름과 에러 메시지를 콘솔에 출력하세요.

예제

componentDidCatch(error, errorInfo) {
  console.error(`Error in ${errorInfo.componentStack}: ${error.message}`);
}

---

5. Q&A 및 정리 (10분)

• Q&A:
  1. Error Boundaries는 모든 에러를 처리할 수 있나요?
  2. 클래스형 컴포넌트가 아닌 함수형 컴포넌트에서도 Error Boundaries를 구현할 수 있나요?
• 요약:
  • Error Boundaries는 React 컴포넌트에서 발생하는 에러를 처리하는 강력한 도구입니다.
  • componentDidCatch와 getDerivedStateFromError를 사용하여 에러를 캡처하고 사용자에게 대체 UI를 제공할 수 있습니다.
  • Error Boundaries는 UI 트리를 보호하지만, 이벤트 핸들러와 같은 React 외부의 에러는 처리하지 않습니다.