React의 Suspense 기능을 활용하면 비동기 작업 중에도 사용자에게 로딩 상태를 제공할 수 있습니다. Suspense는 데이터를 불러오거나 계산하는 동안 UI를 일시적으로 중단시키는 기능입니다. 이를 사용하여 비동기적으로 데이터를 필터링하는 방법을 살펴보겠습니다.

1. 필터링 로직 작성하기

먼저, 필터링하고자 하는 데이터를 처리하는 필터링 로직을 작성합니다. 예를 들어, API에서 데이터를 가져와 특정 조건에 맞는 데이터만 필터링하는 경우 다음과 같은 로직을 작성할 수 있습니다.

function filterData(data) {
  return data.filter(item => item.category === "food");
}

위의 예시에서는 data 배열에서 category가 “food”인 항목들만 필터링하여 반환하는 함수를 작성한 것입니다.

2. Suspense 컴포넌트 구성하기

Suspense 컴포넌트는 데이터를 로딩하는 동안 UI를 일시 중단시키는 역할을 담당합니다. Suspense 컴포넌트를 사용하려면 fallback prop을 이용해 로딩 중일 때 보여줄 UI를 지정해야 합니다. 예를 들어, 로딩 중에 “로딩 중…“이라는 메시지를 보여주고 싶다면 다음과 같이 작성할 수 있습니다.

import React, { Suspense } from "react";

function MyComponent() {
  return (
    <Suspense fallback={<div>로딩 중...</div>}>
      {/* 비동기 작업 수행 */}
    </Suspense>
  );
}

위의 예시에서는 Suspense 컴포넌트 내부에서 비동기적으로 작업을 수행할 부분을 작성하면 됩니다.

3. 필터링된 데이터 불러오기

Suspense 내부에서 필터링된 데이터를 불러올 수 있습니다. 일반적으로 데이터를 로딩하는 라이브러리나 API 호출을 사용하게 되는데, 이 예시에서는 fetchData 함수를 사용하여 필터링된 데이터를 가져오는 것으로 가정하겠습니다.

import React, { Suspense } from "react";

function MyComponent() {
  const filteredData = fetchData(); // 비동기적으로 데이터 불러오기

  return (
    <Suspense fallback={<div>로딩 중...</div>}>
      {filteredData.map((item, index) => (
        <div key={index}>{item.name}</div>
      ))}
    </Suspense>
  );
}

위의 예시에서는 filteredData에서 map 함수를 사용하여 필터링된 데이터를 렌더링하는 것을 볼 수 있습니다.

요약

Suspense를 사용하여 비동기적으로 데이터를 필터링하는 방법에 대해 알아보았습니다. 필요한 데이터를 비동기로 가져오는 동안 로딩 상태를 사용자에게 제공할 수 있도록 Suspense 컴포넌트를 활용하고 필터링된 데이터를 화면에 렌더링할 수 있습니다.

참고 자료:

• React 공식 문서: Suspense
• 비동기 데이터 가져오기 with Suspense