React의 Suspense는 비동기적으로 데이터를 로딩할 때 사용할 수 있는 강력한 도구입니다. 데이터를 새로 고침하고 화면을 업데이트하는 동안 사용자에게 로딩 상태를 보여줄 수 있는 기능을 제공합니다.

1. React Suspense 소개

React Suspense는 React v16.6부터 도입된 기능으로, 주로 데이터 fetch, 코드 스플리팅 등 비동기적인 작업을 처리할 때 사용됩니다. Suspense는 코드가 비동기적으로 로딩되는 동안 스켈레톤 UI 또는 로딩 스피너와 같은 로딩 상태를 보여줄 수 있게 해줍니다.

2. Suspense와 함께 데이터 새로고침하기

비동기적으로 데이터를 새로 고칠 때 Suspense를 사용하여 사용자에게 로딩 상태를 보여줄 수 있습니다. 아래는 Suspense를 사용하여 데이터를 새로 고칠 때의 예시입니다.

import React, { Suspense } from 'react';

function RefreshData({ refresh }) {
  return (
    <button onClick={refresh}>
      Refresh Data
    </button>
  );
}

function DataComponent() {
  // 비동기적으로 데이터 fetch 등을 수행하는 함수
  const fetchData = async () => {
    // 데이터 fetch 로직 실행
  };

  // Suspense 사용하여 데이터 로딩 상태를 처리
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <RefreshData refresh={fetchData} />
      {/* 데이터 사용 */}
    </Suspense>
  );
}

export default DataComponent;

위 코드에서 DataComponent는 데이터를 새로 고칠 때 Suspense 컴포넌트로 감싸져 있습니다. 이때 fallback prop을 사용하여 로딩 중일 때 사용자에게 보여줄 컴포넌트를 설정할 수 있습니다.

RefreshData 컴포넌트는 클릭 이벤트가 발생하면 fetchData 함수를 호출하여 데이터를 새로 고치는 역할을 합니다.

3. 참고 자료

• React Suspense 공식 문서
• React Suspense를 사용한 비동기 데이터 로딩