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

// 비동기로 데이터를 가져오는 함수
const fetchData = async () => {
  // 비동기 작업 수행
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  
  return data;
}

// 데이터 필터링 함수
const filterData = (data) => {
  // 데이터를 필터링하는 로직 작성
  // 예시로 'name' 속성이 'John'인 데이터만 필터링하는 코드
  const filteredData = data.filter(item => item.name === 'John');
  
  return filteredData;
}

const DataFilteringComponent = () => {
  const [filteredData, setFilteredData] = useState([]);
  
  useEffect(() => {
    const fetchDataAndFilter = async () => {
      const data = await fetchData();
      const filteredData = filterData(data);
      setFilteredData(filteredData);
    };
    
    fetchDataAndFilter();
  }, []);
  
  return (
    <Suspense fallback={<div>Loading...</div>}>
      {/* 필터링된 데이터를 사용하여 컴포넌트를 렌더링하는 로직 */}
      {filteredData.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </Suspense>
  );
}

export default DataFilteringComponent;