Suspense를 사용하여 사용자 상호작용을 지연시키는 방법은?

07 Nov 2023

reactjs

Suspense는 React의 기능 중 하나로, 데이터 로딩이나 코드 분할과 같은 리소스를 동적으로 로딩할 때 사용됩니다. Suspense를 사용하면 사용자가 다른 컴포넌트로 전환되거나 데이터가 로딩되는 동안 로딩 상태를 표시할 수 있습니다.

예를 들어, 데이터를 가져와서 표시하는 컴포넌트가 있다고 가정해봅시다. 이 컴포넌트가 데이터를 로딩하는 동안 Suspense를 사용하여 로딩 상태를 표시할 수 있습니다.

import React, { Suspense } from 'react';

// 로딩 표시를 위한 컴포넌트
const LoadingIndicator = () => <div>Loading...</div>;

// 데이터를 가져와서 표시하는 컴포넌트
const DataComponent = () => {
  // 데이터를 가져오는 비동기 함수
  const fetchData = async () => {
    // 데이터를 가져오는 로직
  };

  useEffect(() => {
    fetchData();
  }, []);

  return <div>Data Component</div>;
};

const App = () => (
  <div>
    {/* Suspense를 사용하여 로딩 상태를 표시 */}
    <Suspense fallback={<LoadingIndicator />}>
      <DataComponent />
    </Suspense>
  </div>
);

위의 예제에서 Suspense 컴포넌트는 fallback prop을 통해 로딩 상태에서 보여질 컴포넌트를 지정합니다. 따라서 DataComponent가 데이터를 로딩하는 동안 LoadingIndicator 컴포넌트가 보여지게 됩니다.

이러한 방식으로 Suspense를 사용하여 사용자 상호작용을 지연시킬 수 있습니다. Suspense를 사용하면 사용자에게 로딩 상태를 명확하게 보여줄 수 있어서 더 좋은 사용자 경험을 제공할 수 있습니다.

#React #Suspense