Suspense를 사용하여 비동기적으로 데이터를 업데이트하는 방법은?

07 Nov 2023

suspense

React의 Suspense 기능을 사용하면 비동기적으로 데이터를 업데이트할 수 있습니다. Suspense는 React 16.6 버전부터 도입된 기능으로, 데이터를 가져오는 동안 일부 컴포넌트를 보여주고, 데이터가 준비되면 업데이트된 내용을 보여주는 역할을 합니다. 이 기능은 코드의 가독성과 유지보수성을 향상시키며, 사용자 경험을 개선할 수 있습니다.

1. Suspense와 Lazy Loading

Suspense는 코드 스플리팅과 함께 사용되어 특정 컴포넌트를 게으르게 로딩하도록 할 수 있습니다. 게으르게 로딩한다는 것은 컴포넌트가 필요할 때만 실제로 로딩되고 렌더링되는 것을 의미합니다. 이를 통해 초기 로딩 시간을 줄이고 필요한 컴포넌트만 렌더링하여 성능을 최적화할 수 있습니다.

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

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <LazyComponent />
    </Suspense>
  );
}

export default App;

위의 예제에서 LazyComponent는 import를 통해 동적으로 로딩됩니다. Suspense 컴포넌트는 fallback prop으로 로딩 중인 동안 보여줄 UI를 지정할 수 있습니다. 이 경우 <Spinner /> 컴포넌트가 나타납니다.

2. Suspense와 데이터 fetching

비동기 데이터 fetching을 담당하는 컴포넌트에도 Suspense를 사용할 수 있습니다. 이를 통해 데이터 fetching이 완료될 때까지 로딩 상태를 보여주고, 데이터를 받아와서 화면을 업데이트할 수 있습니다.

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

function UserProfile() {
  const userData = fetchUserData();

  return <div>{userData.name}</div>;
}

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <UserProfile />
    </Suspense>
  );
}

export default App;

위의 예제에서 fetchUserData 함수는 데이터를 비동기적으로 가져오는 것을 가정합니다. Suspense 컴포넌트는 데이터 fetching이 완료될 때까지 <Spinner />를 보여주며, 데이터를 받아와서 UserProfile 컴포넌트를 렌더링합니다.

3. 에러 처리

Suspense는 데이터 fetching과정에서 발생한 에러를 처리하는 기능도 제공합니다. ErrorBoundary 컴포넌트를 사용하여 에러를 감지하고, 에러를 화면에 보여줄 수 있습니다.

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

function UserProfile() {
  const userData = fetchUserData();

  if (userData.error) {
    throw new Error('Failed to fetch user data');
  }

  return <div>{userData.name}</div>;
}

function ErrorFallback() {
  return <div>Failed to load user profile</div>;
}

function App() {
  return (
    <Suspense fallback={<Spinner />} errorFallback={<ErrorFallback />}>
      <ErrorBoundary>
        <UserProfile />
      </ErrorBoundary>
    </Suspense>
  );
}

export default App;

위의 예제에서 fetchUserData 함수에서 데이터 fetching 중 에러가 발생하면 throw new Error(...)를 통해 에러를 던집니다. Suspense 컴포넌트에 errorFallback prop을 사용하여 에러가 발생했을 때 보여줄 UI를 지정합니다. 또한 ErrorBoundary 컴포넌트를 사용하여 에러를 감지하고 화면에 에러 메시지를 보여줍니다.

Suspense를 사용하여 비동기적으로 데이터를 업데이트하면 사용자에게 부드러운 UI 경험을 제공할 수 있습니다. 코드를 통해 데이터 fetching과 에러 처리를 관리하므로 가독성과 유지보수성도 높일 수 있습니다. 또한, React의 Suspense 기능은 코드 스플리팅과 함께 사용하여 성능을 최적화하는데 도움을 줍니다.

1. Suspense와 Lazy Loading

2. Suspense와 데이터 fetching

3. 에러 처리

참고 자료