React.js Suspense 사용법: 비동기 컴포넌트 쉽게 처리하기

React.js는 매우 유연하고 확장 가능한 프런트엔드 라이브러리로, 최근 몇 년 동안 많은 개발자들에게 인기를 끌고 있습니다. 그 중심에는 비동기 데이터를 효율적으로 처리하고, 사용자 경험을 개선하는 도구들이 존재합니다. 그 중에서 오늘은 React의 Suspense와 함께 비동기 컴포넌트를 어떻게 쉽게 처리할 수 있는지를 살펴보겠습니다.

Suspense란 무엇인가?

Suspense는 React에서 비동기 컴포넌트를 다루기 위해 도입된 개념입니다. 비동기 데이터가 로드될 때까지 컴포넌트의 렌더링을 지연시키는 역할을 합니다. 이를 통해 비동기 데이터가 준비될 때까지 로딩 스피너를 보여주거나, 다른 대체 UI를 제공할 수 있습니다.

기본 사용법은 간단합니다. Suspense 컴포넌트를 사용하여 비동기 컴포넌트를 감싸고, fallback 속성에 로딩 상태를 나타낼 JSX를 전달하면 됩니다.

jsx
import React, { Suspense } from 'react';
const MyLazyComponent = React.lazy(() => import('./MyLazyComponent'));

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

위 예제는 간단한 Suspense의 사용 예입니다. React.lazy를 사용하여 동적으로 컴포넌트를 로드하고, 로드하는 동안 Loading... 텍스트를 보여줍니다.

실전 예제: API 호출과 함께 사용하기

Suspense는 API 호출과 같은 경우에도 유용하게 사용될 수 있습니다. 예를 들어, 데이터 페칭을 해야 하는 컴포넌트를 생각해봅시다. 먼저 데이터 페칭을 하는 함수가 필요합니다.

jsx
function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ data: 'Hello, World!' });
    }, 2000);
  });
}

다음은 이 함수를 사용하는 DataComponent 컴포넌트를 만들어보겠습니다. 이 컴포넌트는 데이터가 로드될 때까지 대기하고, 데이터가 준비되면 표시합니다.

jsx
import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    fetchData().then(result => {
      setData(result.data);
    });
  }, []);

  if (!data) {
    return <div>Loading data...</div>;
  }

  return <div>Data: {data}</div>;
}

이제 이 DataComponent를 Suspense와 함께 사용해 보겠습니다.

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

function DataComponentWrapper() {
  const promise = fetchData();
  throw promise;
}

DataComponentWrapper라는 별도의 컴포넌트를 사용하여 비동기 처리를 선언적으로 할 수 있습니다. Suspense에 의해 자동으로 대기 상태가 관리되며, 비동기 작업이 완료되면 컴포넌트가 정상적으로 렌더링됩니다.

Suspense를 더 효과적으로 사용하기

비동기 로딩이 여러 개일 경우 각 비동기 컴포넌트를 별도의 Suspense로 감싸는 대신, Concurrent Mode에서 SuspenseList를 사용할 수 있습니다.

jsx
import React, { Suspense } from 'react';
import { SuspenseList } from 'react';

<SuspenseList revealOrder="forwards">
  <Suspense fallback={<div>Loading first...</div>}>
    <FirstComponent />
  </Suspense>
  <Suspense fallback={<div>Loading second...</div>}>
    <SecondComponent />
  </Suspense>
</SuspenseList>

위 예제에서 SuspenseList는 여러 비동기 컴포넌트의 로딩 순서를 제어하며, 사용자 경험을 더욱 향상시킬 수 있습니다.

결론

React의 Suspense는 비동기 데이터를 처리할 때 매우 유용하게 사용될 수 있는 강력한 도구입니다. 이를 통해 비동기 컴포넌트 로딩 중의 사용자 경험을 개선할 수 있습니다. 비동기 처리를 선언적으로 할 수 있게 하여, 코드의 가독성과 유지보수성을 높일 수 있습니다. 다양한 상황에서 Suspense를 적용해보며 그 진가를 경험해보시기 바랍니다.