import React, { Suspense } from 'react';

// 데이터 가져오기 시뮬레이션(예: API에서)
const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: 'John Doe', age: 30 });
    }, 2000);
  });
};

// Suspense가 사용할 수 있는 리소스 생성
const createResource = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise().then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }

      return result;
    },
  };
};

const userData = createResource(fetchData);

// 리소스에서 읽는 컴포넌트
const UserProfile = () => {
  const data = userData.read();
  return (
    

      
Name: {data.name}
      
Age: {data.age}
    
  );
};

const App = () => {
  return (
    사용자 데이터 로딩 중...

이 예에서:

• `fetchData`는 비동기 데이터 가져오기 작업을 시뮬레이션합니다.
• `createResource`는 데이터의 로딩 상태를 추적하는 데 사용할 수 있는 리소스를 생성합니다.
• `UserProfile`은 `read` 메서드를 사용하여 리소스에서 데이터를 읽습니다. 데이터가 아직 사용 가능하지 않으면 promise를 throw하여 컴포넌트를 일시 중지합니다.
• `Suspense` 컴포넌트는 `UserProfile`을 래핑하고 컴포넌트가 일시 중지되는 동안 표시할 UI를 지정하는 `fallback` prop을 제공합니다.

코드 분할을 사용한 Suspense

Suspense는 React.lazy와 함께 사용하여 코드 분할을 구현할 수도 있습니다. 이렇게 하면 필요한 경우에만 컴포넌트를 로드할 수 있으므로 초기 페이지 로드 성능이 향상됩니다.

import React, { Suspense, lazy } from 'react';

// MyComponent 컴포넌트를 lazy 로드
const MyComponent = lazy(() => import('./MyComponent'));

const App = () => {
  return (
    컴포넌트 로딩 중...}>
      
    
  );
};

export default App;

이 예에서:

• `React.lazy`는 `MyComponent` 컴포넌트를 지연 로드하는 데 사용됩니다.
• `Suspense` 컴포넌트는 `MyComponent`를 래핑하고 컴포넌트가 로드되는 동안 표시할 UI를 지정하는 `fallback` prop을 제공합니다.

Error Boundaries 이해

Error Boundaries는 하위 컴포넌트 트리의 JavaScript 오류를 모두 catch하고, 해당 오류를 기록하고, 전체 애플리케이션을 중단하는 대신 대체 UI를 표시하는 React 컴포넌트입니다. 예상치 못한 오류를 우아하게 처리하여 사용자 경험을 개선하고 애플리케이션을 더욱 강력하게 만드는 방법을 제공합니다.

Error Boundaries의 주요 개념

• 오류 catch: Error Boundaries는 렌더링 중, 생명 주기 메서드에서, 그리고 하위 전체 트리의 생성자에서 오류를 catch합니다.
• Fallback UI: 오류가 발생했을 때 표시되는 UI입니다. 일반적으로 오류 메시지 또는 자리 표시자입니다.
• 오류 로깅: Error Boundaries를 사용하면 오류를 디버깅 목적으로 서비스 또는 콘솔에 로깅할 수 있습니다.
• 컴포넌트 트리 격리: Error Boundaries는 오류를 컴포넌트 트리의 특정 부분으로 격리하여 전체 애플리케이션이 중단되는 것을 방지합니다.

Error Boundaries의 기본 구현

다음은 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, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 모든 사용자 지정 대체 UI를 렌더링할 수 있습니다.
      return 
문제가 발생했습니다.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

이 예에서:

• `ErrorBoundary` 컴포넌트는 `getDerivedStateFromError` 및 `componentDidCatch` 메서드를 정의합니다.
• `getDerivedStateFromError`는 하위 컴포넌트에서 오류가 발생할 때 호출됩니다. 오류가 발생했음을 나타내도록 상태를 업데이트합니다.
• `componentDidCatch`는 오류가 catch된 후에 호출됩니다. 서비스 또는 콘솔에 오류를 로깅할 수 있습니다.
• `render` 메서드는 `hasError` 상태를 확인하고 오류가 발생한 경우 대체 UI를 표시합니다.

Error Boundaries 사용

`ErrorBoundary` 컴포넌트를 사용하려면 보호하려는 컴포넌트를 해당 컴포넌트로 래핑하기만 하면 됩니다.

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

const MyComponent = () => {
  // 오류 시뮬레이션
  throw new Error('오류가 발생했습니다!');
};

const App = () => {
  return (
    
      
    
  );
};

export default App;

이 예에서 `MyComponent`에서 오류가 발생하면 `ErrorBoundary` 컴포넌트가 오류를 catch하고 대체 UI를 표시합니다.

Suspense 및 Error Boundaries 결합

Suspense 및 Error Boundaries를 결합하여 비동기 작업에 대한 강력하고 포괄적인 오류 처리 전략을 제공할 수 있습니다. Suspense를 사용하여 로딩 상태를 처리하고 Error Boundaries를 사용하여 예상치 못한 오류를 처리함으로써 로딩 상태와 예상치 못한 오류를 모두 우아하게 처리할 수 있습니다.

Suspense 및 Error Boundaries 결합의 예

import React, { Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';

// 데이터 가져오기 시뮬레이션(예: API에서)
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // 성공적인 데이터 가져오기 시뮬레이션
      // resolve({ name: 'John Doe', age: 30 });

      // 데이터 가져오는 동안 오류 시뮬레이션
      reject(new Error('사용자 데이터를 가져오지 못했습니다'));

    }, 2000);
  });
};

// Suspense가 사용할 수 있는 리소스 생성
const createResource = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise().then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }

      return result;
    },
  };
};

const userData = createResource(fetchData);

// 리소스에서 읽는 컴포넌트
const UserProfile = () => {
  const data = userData.read();
  return (
    

      
Name: {data.name}
      
Age: {data.age}
    
  );
};

const App = () => {
  return (
    
      사용자 데이터 로딩 중...}>
        
      
    
  );
};

export default App;

이 예에서:

• `ErrorBoundary` 컴포넌트는 `Suspense` 컴포넌트를 래핑합니다.
• `Suspense` 컴포넌트는 `UserProfile` 컴포넌트를 래핑합니다.
• `fetchData` 함수가 오류로 reject되면 `Suspense` 컴포넌트가 promise reject를 catch하고 `ErrorBoundary`가 Suspense에서 throw된 오류를 catch합니다.
• 그러면 `ErrorBoundary`가 대체 UI를 표시합니다.
• 데이터가 성공적으로 가져오면 `Suspense` 컴포넌트가 `UserProfile` 컴포넌트를 표시합니다.

고급 기술 및 모범 사례

Suspense 성능 최적화

• 메모이제이션 사용: 불필요한 재렌더링을 방지하기 위해 Suspense 경계 내에서 렌더링되는 컴포넌트를 메모이제이션합니다.
• 깊은 Suspense 트리 방지: 렌더링 성능에 미치는 영향을 최소화하기 위해 Suspense 트리를 얕게 유지합니다.
• 데이터 미리 가져오기: 일시 중단 가능성을 줄이기 위해 필요하기 전에 데이터를 미리 가져옵니다.

사용자 지정 Error Boundaries

특정 유형의 오류를 처리하거나 더 많은 정보를 제공하는 오류 메시지를 제공하기 위해 사용자 지정 Error Boundaries를 만들 수 있습니다. 예를 들어 발생한 오류 유형에 따라 다른 대체 UI를 표시하는 Error Boundary를 만들 수 있습니다.

Suspense를 사용한 서버 측 렌더링(SSR)

초기 페이지 로드 성능을 개선하기 위해 Suspense를 서버 측 렌더링(SSR)과 함께 사용할 수 있습니다. SSR을 사용하는 경우 서버에서 애플리케이션의 초기 상태를 미리 렌더링한 다음 나머지 콘텐츠를 클라이언트로 스트리밍할 수 있습니다. Suspense를 사용하면 SSR 중에 비동기 데이터 가져오기를 처리하고 데이터를 스트리밍하는 동안 로딩 표시기를 표시할 수 있습니다.

다양한 오류 시나리오 처리

다음과 같은 다양한 오류 시나리오와 이를 처리하는 방법을 고려하십시오.

• 네트워크 오류: 사용자에게 유익한 오류 메시지를 표시하여 네트워크 오류를 우아하게 처리합니다.
• API 오류: 발생한 오류에 특정된 오류 메시지를 표시하여 API 오류를 처리합니다.
• 예상치 못한 오류: 오류를 로깅하고 사용자에게 일반적인 오류 메시지를 표시하여 예상치 못한 오류를 처리합니다.

전역 오류 처리

Error Boundaries에서 catch되지 않은 오류를 catch하기 위해 전역 오류 처리 메커니즘을 구현합니다. 이는 전역 오류 처리기를 사용하거나 전체 애플리케이션을 Error Boundary로 래핑하여 수행할 수 있습니다.

실제 예 및 사용 사례

전자 상거래 애플리케이션

전자 상거래 애플리케이션에서 Suspense를 사용하여 제품 데이터를 가져오는 동안 로딩 표시기를 표시하고 Error Boundaries를 사용하여 결제 프로세스 중에 발생하는 오류를 처리할 수 있습니다. 예를 들어 미국에 위치한 온라인 상점을 탐색하는 일본의 사용자를 상상해 보십시오. 제품 이미지와 설명이 로드되는 데 시간이 걸릴 수 있습니다. Suspense는 이 데이터가 전 세계 서버에서 가져오는 동안 간단한 로딩 애니메이션을 표시할 수 있습니다. 결제 게이트웨이가 일시적인 네트워크 문제(전 세계적으로 다양한 인터넷 인프라에서 흔함)로 인해 실패하면 Error Boundary가 나중에 다시 시도하라는 메시지를 표시하여 사용자 친화적인 메시지를 표시할 수 있습니다.

소셜 미디어 플랫폼

소셜 미디어 플랫폼에서 Suspense를 사용하여 사용자 프로필 및 게시물을 가져오는 동안 로딩 표시기를 표시하고 Error Boundaries를 사용하여 이미지 또는 비디오를 로드할 때 발생하는 오류를 처리할 수 있습니다. 인도에서 탐색하는 사용자가 유럽의 서버에 호스팅된 미디어를 로드하는 데 시간이 더 오래 걸릴 수 있습니다. Suspense는 콘텐츠가 완전히 로드될 때까지 자리 표시자를 표시할 수 있습니다. 특정 사용자의 프로필 데이터가 손상된 경우(드물지만 가능함) Error Boundary가 전체 소셜 미디어 피드가 중단되는 것을 방지하고 "사용자 프로필을 로드할 수 없습니다"와 같은 간단한 오류 메시지를 표시할 수 있습니다.

대시보드 애플리케이션

대시보드 애플리케이션에서 Suspense를 사용하여 여러 소스에서 데이터를 가져오는 동안 로딩 표시기를 표시하고 Error Boundaries를 사용하여 차트 또는 그래프를 로드할 때 발생하는 오류를 처리할 수 있습니다. 런던에 있는 금융 분석가가 전 세계 여러 거래소에서 데이터를 로드하는 글로벌 투자 대시보드에 액세스하고 있을 수 있습니다. Suspense는 각 데이터 소스에 대한 로딩 표시기를 제공할 수 있습니다. 한 거래소의 API가 다운된 경우 Error Boundary가 해당 거래소의 데이터에 대한 오류 메시지를 표시하여 전체 대시보드를 사용할 수 없게 되는 것을 방지할 수 있습니다.

결론

React Suspense 및 Error Boundaries는 탄력적이고 사용자 친화적인 React 애플리케이션을 구축하기 위한 필수 도구입니다. Suspense를 사용하여 로딩 상태를 관리하고 Error Boundaries를 사용하여 예상치 못한 오류를 처리하면 전반적인 사용자 경험을 개선하고 개발 프로세스를 단순화할 수 있습니다. 이 가이드에서는 기본 개념부터 고급 기술까지 모든 것을 다루면서 Suspense 및 Error Boundaries에 대한 포괄적인 개요를 제공했습니다. 이 기사에서 설명한 모범 사례를 따르면 가장 어려운 시나리오에서도 처리할 수 있는 강력하고 안정적인 React 애플리케이션을 구축할 수 있습니다.

React가 계속 발전함에 따라 Suspense 및 Error Boundaries는 최신 웹 애플리케이션을 구축하는 데 점점 더 중요한 역할을 할 것입니다. 이러한 기능을 마스터하면 앞서 나가 탁월한 사용자 경험을 제공할 수 있습니다.