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

07 Nov 2023

reactjs

React의 Suspense는 비동기적인 작업을 처리하는 동안 컴포넌트의 로딩 상태를 관리하기 위한 기능입니다. React에서 비동기적으로 데이터를 저장하는 방법에는 여러 가지가 있지만, 이를 Suspense와 함께 사용하여 처리하는 방법을 소개하겠습니다.

React.lazy를 사용하여 컴포넌트를 비동기적으로 import하기: ```jsx import React, { lazy, Suspense } from ‘react’;

const SaveDataComponent = lazy(() => import(‘./SaveDataComponent’));

function App() { return ( <div> <Suspense fallback={<div>Loading…</div>}> </Suspense> </div> ); }

2. `SaveDataComponent`에서 데이터를 비동기적으로 저장하기:
```jsx
import React, { useState, useEffect } from 'react';

function SaveDataComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      {data ? (
        <div>
          <h1>Data loaded!</h1>
          <ul>
            {data.map((item) => (
              <li key={item.id}>{item.name}</li>
            ))}
          </ul>
        </div>
      ) : (
        <div>Loading data...</div>
      )}
    </div>
  );
}

export default SaveDataComponent;

위의 예시 코드에서, React.lazy 함수를 사용하여 SaveDataComponent를 비동기적으로 import합니다. 이렇게 함으로써 컴포넌트가 실제로 필요해질 때까지 로딩을 지연시킬 수 있습니다. Suspense 컴포넌트는 fallback prop을 사용하여 로딩 중에 표시할 컴포넌트를 지정합니다.

SaveDataComponent에서는 useEffect를 사용하여 비동기적으로 데이터를 가져와 상태인 data에 저장합니다. 데이터가 로딩되면 저장된 데이터를 화면에 렌더링하고, 아직 로딩 중이라면 로딩 중 메시지를 표시합니다.

이렇게 Suspense와 비동기적 데이터 저장을 결합하여 사용하면, 로딩 상태를 관리하면서 데이터를 비동기적으로 처리할 수 있습니다.

참고 자료:

React 공식 문서 - Suspense
React 공식 문서 - React.lazy()