React에서 Suspense와 Error Boundary로 안정적인 비동기 처리

// ErrorBoundary.js

 

import React, { Component } from 'react';

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

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

  componentDidCatch(error, errorInfo) {
    console.error('ErrorBoundary caught an error:', error, errorInfo);
  }

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

 

 

 

// SuspenseExample.js

import React, { Suspense } from 'react';

const fetchData = () =>
  new Promise((resolve) =>
    setTimeout(() => resolve('비동기 데이터 로드 완료!'), 2000)
  );

const AsyncComponent = React.lazy(() =>
  fetchData().then((data) => ({
    default: () => <p>{data}</p>,
  }))
);

export default function SuspenseExample() {
  return (
    <div>
      <h1>React Suspense 예제</h1>
      <ErrorBoundary>
        <Suspense fallback={<p>Loading...</p>}>
          <AsyncComponent />
        </Suspense>
      </ErrorBoundary>
    </div>
  );
}