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

07 Nov 2023

javascript

비동기 함수 생성: 데이터를 변환하는 함수를 생성합니다. 이 함수는 Promise 객체를 반환해야 합니다. 예를 들어, 다음과 같이 비동기 함수를 작성할 수 있습니다.

async function fetchData() {
  // 비동기적으로 데이터 가져오기
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  
  // 데이터 변환 작업 수행
  const transformedData = data.map(item => {
    return {
      id: item.id,
      name: item.name.toUpperCase(),
    };
  });
  
  // 변환된 데이터 반환
  return transformedData;
}

Suspense 컴포넌트 사용: Suspense 컴포넌트를 사용하여 로딩 상태를 처리합니다. Suspense 컴포넌트는 fallback prop을 사용하여 로딩 중에 보여줄 컴포넌트를 지정할 수 있습니다. 예를 들어, 다음과 같이 Suspense 컴포넌트를 사용할 수 있습니다.

import React, { Suspense } from 'react';

const TransformData = React.lazy(() => import('./TransformData'));

function App() {
  return (
    <div>
      <h1>데이터 변환 예제</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <TransformData />
      </Suspense>
    </div>
  );
}

export default App;

비동기 데이터 사용: Suspense 컴포넌트 내에서 비동기 함수를 호출하고 데이터를 사용합니다. Suspense 컴포넌트는 비동기 함수가 완료되기 전까지 로딩 상태를 보여주고, 데이터가 준비되면 해당 데이터를 사용하여 자식 컴포넌트를 렌더링합니다. 예를 들어, 다음과 같이 자식 컴포넌트에서 Suspense 컴포넌트를 사용하여 데이터를 변환한 후 사용할 수 있습니다.

import React from 'react';

const TransformData = () => {
  const transformedData = fetchData(); // 비동기 함수 호출
  
  return (
    <div>
      <h2>변환된 데이터</h2>
      <ul>
        {transformedData.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default TransformData;

이제, 데이터를 비동기적으로 변환하는 방법에 대해 알아보았습니다. Suspense를 사용하여 간단하고 효율적으로 비동기 작업을 처리할 수 있습니다. Suspense는 React의 일부이며, React 애플리케이션에서 비동기 작업을 다룰 때 유용한 기능입니다.

#JavaScript #React