이번 블로그 포스트에서는 비동기적으로 데이터를 검색하는 데 사용되는 Suspense에 대해 알아보겠습니다. Suspense는 React 애플리케이션에서 비동기 작업을 처리하고 컴포넌트가 데이터를 로딩할 때 로딩 상태를 처리하는 데 사용됩니다.

Suspense란?

Suspense는 React 16.6 버전에서 도입된 기능으로, 비동기 작업이나 코드 분할과 같은 상황에서 컴포넌트가 로딩 상태를 처리할 수 있게 해줍니다. Suspense 컴포넌트는 fallback prop을 통해 로딩 중인 상태를 나타내는 요소를 구현할 수 있습니다.

비동기 데이터 검색을 위한 Suspense 사용하기

1. Suspense 컴포넌트를 import합니다:

import { Suspense } from 'react';

1. 비동기로 데이터를 검색하는 함수를 만듭니다. 여기서는 Axios를 사용한 예시를 보겠습니다:

import axios from 'axios';

async function fetchData() {
  const response = await axios.get('/api/data');
  return response.data;
}

1. Suspense 컴포넌트를 사용하여 데이터를 로딩할 때 로딩 상태를 처리합니다. 이때 fallback prop을 사용하여 로딩 중인 상태를 표시할 컴포넌트를 지정할 수 있습니다. 예를 들어, 로딩 중인 동안에는 “로딩 중…“이라는 텍스트를 나타내는 Loading 컴포넌트를 사용하겠습니다:

function App() {
  return (
    <div>
      <h1>비동기 데이터 검색</h1>
      <Suspense fallback={<Loading />}>
        <DataComponent />
      </Suspense>
    </div>
  );
}

1. 실제 데이터를 렌더링하는 컴포넌트를 생성합니다. 이때 fetchData 함수를 호출하고 데이터를 받아온 후에 렌더링을 진행합니다. 만약 데이터가 로딩 중이라면 fallback prop에서 지정한 컴포넌트가 렌더링됩니다.

function DataComponent() {
  const data = fetchData();

  return (
    <div>
      <h2>데이터</h2>
      <p>{data}</p>
    </div>
  );
}

이제 Suspense 컴포넌트를 통해 비동기적으로 데이터를 검색할 수 있습니다. 로딩 중인 상태를 처리하기 위해 fallback prop에 ‘로딩 중…’ 텍스트를 포함한 컴포넌트를 사용하면 사용자에게 직관적인 UI를 제공할 수 있습니다.

추가적으로 Suspense는 React.lazy를 사용하여 컴포넌트를 지연로딩할 때에도 함께 사용할 수 있습니다.

결론

이번 포스트에서는 Suspense를 사용하여 비동기로 데이터를 검색하는 방법에 대해 살펴보았습니다. Suspense를 사용하면 로딩 중 상태를 처리하고, 데이터를 비동기적으로 검색할 수 있게 됩니다. 이를 통해 사용자에게 좀 더 나은 사용자 경험을 제공할 수 있습니다.

더 많은 정보를 원하신다면 React 공식 문서의 Suspense를 참고하시기 바랍니다.