Suspense를 사용하여 로딩 스피너의 로딩 상태를 관리하는 방법은?

07 Nov 2023

reactjs

로딩 컴포넌트 작성하기: 먼저, 로딩 상태를 나타내는 컴포넌트를 작성해야 합니다. 이 컴포넌트는 로딩 스피너를 보여주는 역할을 담당합니다. 다음은 간단한 예시입니다.

import React from 'react';

const LoadingSpinner = () => {
  return (
    <div>
      {/* 로딩 스피너를 보여주는 UI */}
      <p>Loading...</p>
    </div>
  );
};

export default LoadingSpinner;

Suspense 컴포넌트로 감싸기: Suspense 컴포넌트를 사용하여 로딩 컴포넌트를 감싸야 합니다. Suspense는 비동기 작업을 기다리는 동안 로딩 컴포넌트를 보여주는 역할을 합니다. Suspense 컴포넌트의 fallback prop에 로딩 컴포넌트를 전달합니다.

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

const App = () => {
  return (
    <div>
      <h1>My App</h1>
      <Suspense fallback={<LoadingSpinner />}>
        {/* 비동기로 로드되는 컴포넌트 */}
      </Suspense>
    </div>
  );
};

export default App;

로딩 컴포넌트 사용하기: Suspense 컴포넌트로 감싸진 영역에서 비동기적으로 로드되는 컴포넌트를 사용해야 합니다. Suspense 컴포넌트는 비동기적으로 로드되는 컴포넌트의 로딩이 완료될 때까지 로딩 컴포넌트를 보여줍니다.

import React, { lazy } from 'react';

// 비동기로 로드되는 컴포넌트
const AsyncComponent = lazy(() => import('./AsyncComponent'));

const App = () => {
  return (
    <div>
      <h1>My App</h1>
      <Suspense fallback={<LoadingSpinner />}>
        <AsyncComponent />
      </Suspense>
    </div>
  );
};

export default App;

위 예시에서 AsyncComponent는 비동기로 로드되는 컴포넌트이며, Suspense 컴포넌트로 감싸져 있습니다. 비동기 로드가 완료되기 전까지는 로딩 컴포넌트인 LoadingSpinner가 보여지게 됩니다.

이와 같이 Suspense를 사용하여 로딩 스피너의 로딩 상태를 관리할 수 있습니다. Suspense는 React의 최신 기능 중 하나이므로 React 버전을 확인하고 사용하시기 바랍니다.

#React #Suspense