Suspense를 사용하여 요소의 시각적인 로딩 상태를 표시하는 방법은?

07 Nov 2023

suspense

Suspense 컴포넌트를 import 합니다.

import React, { Suspense } from 'react';

Suspense 컴포넌트 안에 요소를 포함시킵니다. 일반적으로 lazy loading된 컴포넌트를 Suspense로 감쌀 때 사용됩니다. ```jsx

</Suspense>

3. fallback prop을 사용하여 로딩 상태를 표시하는 요소를 정의합니다. 이 예시에서는 `<LoadingSpinner />` 컴포넌트를 사용합니다.
```jsx
const LoadingSpinner = () => {
  return (
    <div>
      <h1>Loading...</h1>
      {/* 로딩 상태 표시용 스피너 또는 이미지 등을 추가할 수 있습니다 */}
    </div>
  );
};

이렇게 함으로써 Suspense 컴포넌트는 <LazyComponent />를 로딩하는 동안 <LoadingSpinner /> 컴포넌트를 렌더링하게 됩니다. 그리고 <LazyComponent />가 로딩이 완료되면 <LoadingSpinner /> 대신 해당 컴포넌트를 자동으로 렌더링합니다.

Suspense를 사용하면 코드의 가독성을 높일 수 있으며, 로딩 상태를 시각적으로 표시할 때 유용합니다.

🔖 참고 자료:

React 공식 문서: Suspense