Suspense와 ErrorBoundary

ErrorBoundary

- 컴포넌트의 에러처리를 위함

- 하위 컴포넌트 트리에서 발생하는 JavaScript 에러를 포착하여 어플리케이션이 전체적으로 중단되지 않도록 하고, 대신 fallback UI를 표시한다. 이를 통해서 특정 컴포넌트에서 발생한 에러가 전체 UI에 영향을 주지 않도록 격리한다.

 

 

Suspense

- 비동기 로딩상태 관리를 위함

- 비동기 작업이 완료될 때까지 대기하는 동안 fallback ui를 표시하는 컴포넌트이다. 

 

 

ErrorBoundary와 Suspense를 같이 사용할때 

- Suspense는 비동기 작업의 로딩 상태를 관리하지만, 해당 작업 중에 에러가 발생하면 이를 처리할 수 없다. 

- 이 때 ErrorBoundary를 함께 사용하여 에러를 포착하고 적절한 폴백 UI 를 제공한다. 

 

예를 들어서, Suspense로 감싼 컴포넌트에서 데이터 로딩 중 에러가 발생하면, 상위의 ErrorBoundary가 이를 감지하고 에러에 대한 폴백 UI를 표시한다. 

import React, { Suspense } from 'react';

function ErrorBoundary({ children }) {
  return (
    <React.ErrorBoundary fallback={<div>에러가 발생했습니다.</div>}>
      {children}
    </React.ErrorBoundary>
  );
}

function App() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<div>로딩 중...</div>}>
        <MyComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

 

위 코드에서 MyComponent는 비동기 작업을 수행하며, 로딩 중에는 Suspense의 폴백 UI인 "로딩 중..."이 표시됩니다. 만약 MyComponent에서 에러가 발생하면, ErrorBoundary가 이를 감지하여 "에러가 발생했습니다."라는 폴백 UI를 표시합니다.