Suspense를 사용하여 비동기적으로 데이터를 복사하는 방법은?

07 Nov 2023

suspense

React의 Suspense는 비동기적으로 데이터를 로드하고 복사할 수 있는 강력한 기능입니다. Suspense를 사용하면 데이터가 로드될 때까지 대기할 수 있고, 그 동안 로딩 상태를 관리할 수 있습니다. 비동기 데이터 복사를 구현하는 방법을 알아보겠습니다.

먼저, createResource 함수를 사용하여 비동기 작업을 수행할 데이터를 생성합니다.

const fetchData = () => {
  return new Promise((resolve, reject) => {
    // 비동기 작업 실행
    // 데이터를 성공적으로 가져오면 resolve()를 호출하고,
    // 실패하면 reject()를 호출합니다.
  });
};

const resource = createResource(fetchData);

이 함수는 비동기 작업을 실행하고 Promise를 반환합니다. Promise가 성공적으로 해결되면 데이터가 포함된 resolve 값을 반환하고, 실패하면 reject 값을 반환합니다.

Suspense 컴포넌트를 사용하여 데이터 로딩 상태를 관리합니다.
```
function MyComponent() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <DataCopier resource={resource} />
    </Suspense>
  );
}
```
fallback prop으로 로딩 중인 상태를 나타내는 컴포넌트를 설정하십시오. 이 컴포넌트는 데이터가 아직 로드되지 않은 동안 보여집니다.
resource를 사용하여 비동기 작업을 처리하고 데이터를 복사합니다.
```
function DataCopier({ resource }) {
  const data = resource.read();

  // 데이터 복사 로직 작성

  return <div>데이터 복사 완료</div>;
}
```
resource.read()를 호출하여 데이터를 가져옵니다. Suspense가 사용되었기 때문에 데이터가 로드될 때까지 이 부분에서 대기합니다. 이후에는 데이터에 대한 로직을 수행하고 결과를 표시합니다.

이제, Suspense를 사용하여 비동기적으로 데이터를 복사하는 방법을 알아보았습니다. 이 기능을 사용하면 데이터 로딩 상태를 관리하면서 비동기 작업을 처리할 수 있습니다. 문서에 포함된 예제 코드를 사용하여 실제로 구현해 보시기 바랍니다.

참고 자료

React 공식 문서 - Suspense API