Suspense를 사용하여 컴포넌트의 데이터 읽기 액세스를 지연시키는 방법은?

07 Nov 2023

reactjs

다음은 Suspense를 사용하여 컴포넌트의 데이터 읽기 액세스를 지연시키는 예제 코드입니다.

import React, { Suspense } from 'react';

// 데이터를 가져오는 비동기 함수
const fetchData = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Data loaded');
    }, 2000);
  });
};

// 데이터를 로드하는 컴포넌트
const DataLoader = () => {
  const data = fetchData();

  return <div>{data}</div>;
};

// 데이터를 불러오기 전에 로딩 상태를 보여주는 컴포넌트
const LoadingIndicator = () => {
  return <div>Loading...</div>;
};

// Suspense를 사용하여 데이터를 로딩하는 동안 로딩 상태를 보여줌
const App = () => {
  return (
    <div>
      <h1>My App</h1>
      <Suspense fallback={<LoadingIndicator />}>
        <DataLoader />
      </Suspense>
    </div>
  );
};

export default App;

위의 예제에서는 fetchData 함수를 사용하여 데이터를 비동기적으로 가져옵니다. DataLoader 컴포넌트에서는 fetchData 함수를 호출하고 반환된 데이터를 렌더링합니다. Suspense 컴포넌트를 사용하여 DataLoader 컴포넌트를 감싸면, 데이터를 로딩하는 동안 LoadingIndicator 컴포넌트가 보여집니다.

이렇게 Suspense를 사용하여 컴포넌트의 데이터 읽기 액세스를 지연시킬 수 있습니다. 이를 통해 사용자에게 데이터 로딩 상태를 보여주고, 데이터가 준비되면 컴포넌트를 렌더링할 수 있습니다.

이 포스트는 React의 Suspense 기능을 사용하여 컴포넌트의 데이터 읽기 액세스를 지연시키는 방법에 대해 설명하였습니다. 더 자세한 내용은 React 공식 문서를 참고하시기 바랍니다. #React #Suspense

References

React Suspense: https://reactjs.org/docs/react-api.html#reactsuspense