Suspense를 사용하여 페이지 전환의 로딩 상태를 관리하는 방법은 다음과 같습니다:

1. Suspense 컴포넌트를 사용하여 로딩 상태를 설정합니다. Suspense 컴포넌트는 lazy로 로딩되는 컴포넌트를 감싸고, 로딩 중일 때 보여줄 UI를 설정합니다.

예시 코드:

import React, { Suspense } from 'react';

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

function MyPage() {
  return (
    <div>
      <h1>My Page</h1>

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

1. fallback prop을 사용하여 로딩 중일 때 보여줄 UI를 설정합니다. 이 prop은 Suspense 컴포넌트가 로딩 중일 때 보여줄 컴포넌트나 메시지를 지정합니다.

예시 코드에서는 “Loading…“이라는 텍스트가 로딩 중일 때 보여집니다.

1. Suspense를 사용하여 비동기적으로 로딩되는 컴포넌트를 감싸면, 해당 컴포넌트는 로딩이 완료될 때까지 보여지지 않습니다. Suspense 컴포넌트가 비동기적으로 로딩되는 컴포넌트의 상태 변화를 관리하고, 로딩이 완료되면 해당 컴포넌트를 렌더링합니다.

위 방법을 사용하면 페이지 전환 시 로딩 상태를 효과적으로 관리할 수 있습니다. Suspense를 사용하면 사용자에게 로딩 상태를 명확하게 전달할 수 있으며, 비동기적으로 로딩되는 컴포넌트의 관리도 간편해집니다.

더 자세한 내용은 React 공식 문서에서 Suspense를 참고하시기 바랍니다.

#React #Suspense