React의 Suspense 컴포넌트를 사용하면 로딩 중인 컴포넌트를 처리하는 간단하고 효과적인 방법을 제공합니다. 카드 형식의 컴포넌트를 로딩하는 경우, Suspense를 사용하여 로딩 상태를 관리할 수 있습니다.

1. Suspense 컴포넌트 생성

Suspense 라이브러리를 임포트하고, Suspense 컴포넌트를 생성합니다.

import React, { Suspense } from 'react';

const CardComponent = React.lazy(() => import('./CardComponent'));

function App() {
  return (
    <div>
      <h1>카드 컴포넌트 로딩 예제</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <CardComponent />
      </Suspense>
    </div>
  );
}

export default App;

2. 로딩 상태 처리

fallback prop을 사용하여 로딩 중인 상태일 때 보여줄 컴포넌트를 지정합니다. 위 예제에서는 “Loading…” 메시지를 보여주도록 설정했습니다.

3. Lazy 로딩

React.lazy()를 사용하여 로딩할 컴포넌트를 지정합니다. 위 예제에서는 CardComponent를 로딩하도록 설정했습니다.

4. 코드 분할

import() 구문을 사용하여 카드 컴포넌트를 동적으로 로딩합니다. 이를 통해 초기 번들 크기를 줄이고 필요한 컴포넌트만 로드할 수 있습니다.

중요한 점

• Suspense 컴포넌트는 React.lazy()와 함께 사용되어야 합니다.
• 현재 Suspense는 로딩 중인 컴포넌트를 한 번에 하나만 처리할 수 있습니다.
• fallback prop에는 로딩 중일 때 보여줄 컴포넌트나 메시지를 지정해야 합니다.

이렇게 Suspense 컴포넌트를 사용하여 카드 형식의 컴포넌트를 로딩할 수 있습니다. 자세한 내용은 React 공식 문서를 참조하시기 바랍니다.

참고 자료

• React 공식 문서 - Suspense
• Code Splitting in React