[React.js] Suspense 컴포넌트

Suspense 컴포넌트

들어가며

• 리액트(React.js)에서 사용되는 @Suspense@ 컴포넌트에 대해 정리해본다.

 

Suspense 컴포넌트

개념

• 애플리케이션의 비동기 데이터를 쉽게 관리하고 사용자 경험을 개선하기 위해 도입된 기능
• 주로 데이터 로딩 상태를 처리하는데 사용된다.
• 이 컴포넌트를 사용하여 비동기 데이터가 로딩될 때 사용자에게 로딩 스피너(Spinner)나 대체 컨텐츠를 보여줄 수 있다.

 

사용법

• @Suspense@ 컴포넌트는 주로 다른 비동기 컴포넌트를 감싸는 용도로 사용된다.
• @Suspense@는 @fallback@ 이라는 프로퍼티를 통해 로딩 중에 보여줄 컨텐츠를 지정할 수 있다.

<Suspense fallback={<div>Loading...</div>}>
  <MyComponent />
</Suspense>

 

 

사용 시 주의할 점

• @Suspense@는 클라이언트 측 렌더링에서 동작한다.
  • 서버 사이드 렌더링에서는 별도의 설정이 필요하다.
• React 18 기준 비동기 데이터 페칭과 관련된 실험적인 기능으로, 모든 비동기 데이터 페칭 라이브러리에서 지원하는 것은 아니다.

 

사용 예

React.lazy

• 동적으로 컴포넌트를 로드할 수 있게 해준다.
• 코드 분할을 통해 초기 로딩 시간을 줄이고 필요할 때만 컴포넌트를 로드하는 방식

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

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

 

비동기 데이터 페칭(Fetching)

• React 18 이상에서는 @Suspense@와 비동기 데이터 페칭 라이브러리(예: @react-query@, @Relay@)를 함께 사용하여 데이터 로딩 상태를 관리할 수 있다.

import { Suspense } from 'react';
import { useQuery } from 'react-query';

function MyComponent() {
  const { data, error } = useQuery('fetchData', fetchMyData);

  if (error) return <div>Error occurred</div>;
  
  // Suspense에서 fallback이 처리하므로 로딩 상태를 여기서 처리하지 않는다.
  if (!data) return null; 

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

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

 

참고 사이트

<Suspense> – React

Routing: Loading UI and Streaming | Next.js