React Suspend를 이용한 로딩관리

1. React Suspend란?

React의 Suspense는 비동기 데이터를 처리하는 동안 컴포넌트를 일시적으로 중단(suspend)시키고, 데이터가 준비되면 다시 렌더링하도록 돕는 기능입니다. 이를 활용하면 로딩 상태 관리가 간결해지고, 코드의 가독성이 향상됩니다.

2. 기본 사용법

먼저, Suspense를 사용하면 데이터가 로딩될 때 대체 UI(예: 로딩 스피너)를 표시할 수 있습니다.

예제 코드

import React, { Suspense } from 'react';

const DataComponent = React.lazy(() => import('./DataComponent'));

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

export default App;

위 코드에서 React.lazy를 사용하여 동적으로 DataComponent를 불러오고, Suspense를 활용해 로딩 상태를 관리합니다.

3. 데이터 패칭과 Suspense

React 18부터는 useTransition과 useDeferredValue를 활용하여 더욱 부드러운 비동기 처리가 가능합니다.

React Query와 함께 Suspense 사용하기

React Query를 활용하면 Suspense와 자연스럽게 결합하여 더욱 효율적인 데이터 패칭을 할 수 있습니다.

예제 코드

import React, { Suspense } from 'react';
import { useQuery } from '@tanstack/react-query';
import { fetchData } from './api';

function DataComponent() {
  const { data } = useQuery({
    queryKey: ['data'],
    queryFn: fetchData,
    suspense: true, // Suspense 모드 활성화
  });

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

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

export default App;

위 코드에서 useQuery의 suspense: true 옵션을 설정하면, 데이터 로딩 중 Suspense가 자동으로 처리되며 로딩 UI를 표시합니다.

4. 효율적인 Suspense 사용법

✅ 코드 스플리팅

• React.lazy를 사용하여 필요할 때만 컴포넌트를 불러옵니다.
• Suspense를 활용하여 로딩 상태를 관리합니다.

✅ 데이터 패칭 최적화

• useTransition을 사용하면 UI가 부드럽게 변경됩니다.
• React Query 또는 Relay 같은 라이브러리를 사용하면 Suspense와 함께 더욱 최적화된 데이터 패칭이 가능합니다.

5. 마무리

위와 같이 React Suspense를 활용하여 로딩경험을 커스텀하면 더욱 효율적이고 깔끔한 비동기 UI를 구성할 수 있습니다.!