React에서 Suspense와 함께 사용하는 방법에 대해 설명해주세요.

07 Nov 2023

polyfill

React의 Suspense는 비동기적으로 데이터를 로딩하거나 코드를 분할로딩하는 경우에 사용되는 기능입니다. Suspense를 사용하면 로딩 중이거나 에러가 발생했을 때 로딩 상태를 표시할 수 있고, 일시적으로 대체 컨텐츠를 보여줄 수 있습니다.

다음은 React에서 Suspense를 사용하는 방법에 대한 예시 코드입니다.

1. Suspense 컴포넌트를 사용할 컴포넌트 내에 추가하기

먼저, Suspense를 사용할 컴포넌트 내에 Suspense 컴포넌트를 추가합니다. fallback prop은 로딩 중에 보여줄 컨텐츠를 정의합니다.

import React, { Suspense } from 'react';

const MyComponent = () => {
  return (
    <div>
      <h1>My Component</h1>
      <Suspense fallback={<div>Loading...</div>}>
        {/* 비동기적으로 로딩할 컴포넌트나 데이터 */}
      </Suspense>
    </div>
  );
};

export default MyComponent;

2. Suspense 컴포넌트로 감싸진 곳에서 비동기 로딩 처리하기

Suspense 컴포넌트로 감싸진 곳에서 비동기적으로 로딩할 컴포넌트나 데이터를 처리합니다. 이때, 해당 컴포넌트나 데이터는 lazy 함수나 React.lazy를 사용하여 동적으로 import하거나, loadable과 같은 라이브러리를 사용할 수도 있습니다.

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

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

const MyComponent = () => {
  return (
    <div>
      <h1>My Component</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <MyAsyncComponent />
      </Suspense>
    </div>
  );
};

export default MyComponent;

위의 예시 코드에서는 MyAsyncComponent를 비동기적으로 로딩해서 렌더링합니다. 로딩 중에는 fallback prop에 정의된 컨텐츠를 보여줍니다.

3. 에러 처리하기

Suspense는 비동기적으로 로딩한 컴포넌트나 데이터에서 발생하는 에러도 처리할 수 있습니다. 에러가 발생한 경우, ErrorBoundary 컴포넌트를 사용하여 에러 처리 로직을 정의할 수 있습니다.

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

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

const ErrorFallback = () => {
  return <div>Something went wrong!</div>;
};

const MyComponent = () => {
  return (
    <div>
      <h1>My Component</h1>
      <Suspense fallback={<div>Loading...</div>} errorFallback={<ErrorFallback />}>
        <MyAsyncComponent />
      </Suspense>
    </div>
  );
};

export default MyComponent;

위의 예시 코드에서는 ErrorFallback 컴포넌트를 정의하여 에러 발생 시 보여줄 내용을 지정합니다.

React의 Suspense는 비동기적 로딩을 처리하기 위한 강력한 도구입니다. Suspense를 사용하여 로딩 상태와 에러를 관리하고, 사용자에게 로딩 중이라는 메시지를 표시하는 등의 기능을 손쉽게 구현할 수 있습니다. 또한 코드 분할로딩을 통해 초기 로딩 속도를 개선할 수도 있습니다.