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

07 Nov 2023

reactjs

최근 웹 애플리케이션에서 비동기적으로 데이터를 가져와서 처리하는 것이 중요한 요소가 되었습니다. 데이터를 비동기적으로 가져오는 과정에서 사용자는 보통 로딩 상태를 기다려야 하는데, 이는 사용자 경험에 좋지 않을 수 있습니다.

이러한 문제를 해결하기 위해 React 에서 Suspense가 도입되었습니다. Suspense는 코드 스플리팅과 같이 비동기적으로 가져와야 하는 컴포넌트나 리소스를 로딩 상태를 관리해주는 역할을 합니다. 이를 활용하여 비동기적으로 데이터를 추천하는 방법에 대해 알아보겠습니다.

데이터 로딩 컴포넌트 생성

먼저, 추천 데이터를 비동기적으로 로딩하는 컴포넌트를 생성해야 합니다. 이를 위해 Suspense와 lazy를 사용합니다. lazy 함수는 코드 스플리팅을 위해 사용되며, 비동기적으로 컴포넌트를 가져올 수 있게 해줍니다.

import React, { Suspense, lazy } from 'react';

const RecommendedData = lazy(() => import('./RecommendedData'));

function App() {
  return (
    <div>
      <h1>비동기 데이터 추천</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <RecommendedData />
      </Suspense>
    </div>
  );
}

위 코드에서 lazy 함수를 통해 RecommendedData 컴포넌트를 비동기적으로 가져옵니다. Suspense 컴포넌트는 로딩 중인 동안에 보여줄 대체 요소를 fallback prop으로 설정합니다. 위 예시에서는 “Loading…“이라는 텍스트를 보여주고 있습니다.

추천 데이터 컴포넌트 생성

RecommendedData 컴포넌트에서는 실제로 비동기적으로 데이터를 가져오는 로직을 작성해야 합니다. 일반적으로 비동기적인 API 호출을 통해 데이터를 가져올 수 있습니다.

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

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

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      // API 호출 등 비동기 작업 수행
      // 데이터를 가져와서 state 업데이트
      const response = await apiCall();
      setData(response.data);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

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

  return (
    <div>
      <h2>추천 데이터</h2>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

위 코드에서는 React의 useState와 useEffect 훅을 사용하여 데이터를 가져온 후에 상태를 업데이트하고, 그에 따라 컴포넌트를 렌더링합니다. 데이터가 로딩 중인 동안 “Loading data…“를 보여주고, 데이터를 가져온 후에는 실제 데이터를 리스트로 보여줍니다.

결론

Suspense와 lazy를 사용하여 비동기적으로 데이터를 추천하는 방법을 알아보았습니다. 이를 활용하면 로딩 상태를 관리하고 사용자에게 최적화된 경험을 제공할 수 있습니다. 추가적으로 캐싱이나 에러 핸들링 등을 고려하여 실제 프로덕션 환경에 적용할 수 있습니다. 이를 통해 웹 애플리케이션의 성능과 사용자 경험을 향상시킬 수 있습니다.

개발자들을 위한 데이터 추천 기능, #React #비동기 #Suspense

참고자료: