리액트 Suspense는 애플리케이션 내의 로딩 상태 관리를 간편하게 해주는 기능입니다. Suspense는 코드 스플리팅과 비동기 렌더링을 이용하여 리액트 컴포넌트의 로딩 상태를 관리하는데 사용됩니다.

Suspense의 기본 사용법

리액트 Suspense를 사용하려면 먼저 리액트 16.6 버전 이상이 설치되어 있어야 합니다. Suspense는 <React.Suspense> 컴포넌트를 사용하여 적용할 수 있습니다. Suspense는 해당 컴포넌트 하위에서 로딩 중일 때 보여줄 fallback UI를 정의하는 것이 주요 목적입니다.

아래는 Suspense를 사용하여 로딩 중일 때 “로딩 중…“이라는 문구를 화면에 표시하는 간단한 예입니다.

import React, { Suspense } from 'react';

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

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

export default App;

위의 코드에서 React.lazy() 함수를 사용하여 동적으로 컴포넌트를 로딩하고, Suspense 컴포넌트 내에서 <MyComponent />를 렌더링하고 있습니다. 이때 fallback prop을 사용하여 로딩 중일 때 보여줄 UI를 정의할 수 있습니다.

에러 처리

Suspense는 로딩 중 발생하는 에러를 처리하는 기능도 제공합니다. 에러 처리를 위해서는 fallback prop 대신 fallback={<ErrorComponent />}와 같이 에러가 발생했을 때 보여줄 컴포넌트를 설정할 수 있습니다.

import React, { Suspense } from 'react';

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

function App() {
  return (
    <div>
      <Suspense fallback={<div>로딩 중...</div>} fallback={<ErrorComponent />} >
        <MyComponent />
      </Suspense>
    </div>
  );
}

export default App;

참고 자료

• 리액트 공식 문서 - Suspense

#리액트 #Suspense