React 에서 로딩화면을 만들어보자! (Suspense)

화면에 데이터를 불러오고 있을 때 빈화면을 보여주기에는 조금 이상할 때가 가끔 있습니다.

빈화면보다는 로딩화면을 보여주고 데이터가 모두 불러와졌을 때 로딩화면을 보여주는 게 훨씬 낫지 않을까요?

 

그래서 오늘은 Suspense을 통한 로딩화면을 구축해 보겠습니다.

 

 

Suspense란?

Suspense는 하단에 있는 일부 컴포넌트가 아직 렌더링 할 준비가 되지 않은 경우 로딩화면을 나타내주도록 도와주는 컴포넌트입니다.

Suspense를 사용하기 위해서는 React의 lazy loading을 사용해야 합니다.

lazy loading 은 간단하게 사용가능합니다.

 

일반적으로 컴포넌트를 불러올 때는 import 문을 사용합니다.

lazy loading import 문을 똑같이 사용하지만 방법이 조금 다릅니다.

 

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

이런 식으로 React.lazy()을 사용해서 동적으로 import 해서 사용합니다.

 

Suspense 적용

그렇다면 lazy loading을 이용해서 Suspense을

Suspense는 기본적으로 React 안에 존재하는 컴포넌트입니다.

Suspense을 import 해 오고 Suspense를 lazy 컴포넌트에 감싸주면 로딩이 되는 동안 예비 콘텐츠를 보여줄 수 있습니다.

그렇다면 예비 콘텐츠는 어떤 식으로 보여줄 수 있을까요?

Suspense는 fallback이라는 prop를 전달할 수 있게 됩니다. fallback prop은 lazy 컴포넌트가 렌더링 되는 동안 보여주는 화면을 구성해 주는 곳입니다.

import React, { Suspense } from 'react';

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

function App() {
  return (
    <Suspense fallback={<div>로딩화면</div>}>
      <LazyComponent/>
    </Suspense>
  );
}

export default App;

그러면 이제 콘텐츠 로딩이 끝나기 전까지는 fallback 부분인 로딩화면이라는 게 출력되고 콘텐츠 로딩이 끝나면 <LazyComponent/>가 출력됩니다.

 

 

 

Spinners을 통한 간단한 로딩화면 컴포넌트

여러 홈페이지 혹은 앱을 보면 

이렇게 빙글빙글 돌아가는 로딩바가 있는 것을 보신 적이 있을 겁니다.

React에서도 똑같이 만들 수가 있는데 이것을 좀 더 간편하고 쉽게 만들어주는 라이브러리가 존재합니다.

react-spinners라는 라이브러리가 존재하는데 이것을 사용하면 간편하게 컴포넌트를 만들 수 있습니다.

npm i react-spinners

 

저는 react-spinners을 사용해서 간단하게 작업해 보도록 하겠습니다.

 

import React, { Suspense } from 'react';
import { PuffLoader } from 'react-spinners';

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

function App() {

  return (
    <Suspense 
      fallback={<PuffLoader color='#36d7b7' size={30}/>}
    >
      <LazyComponent/>
    </Suspense>
  );
}

export default App;

 

콘텐츠가 불러오기 전까지는 이러한 로딩화면이 출력이 될 겁니다.

 

 

자 이렇게 로딩화면을 간단하게 만들어보았습니다.

생각보다 간단하고 어렵지 않으며 여러 가지 활용을 하면 좋을 것 같아요!

 

 

 

react-spinners의 다른 모양 들은 해당 컴포넌트의 storybook을 확인해 보시면 됩니다.

https://www.davidhu.io/react-spinners/storybook/?path=/docs/barloader--main

Webpack App

 

 

 

참고사이트

https://react-ko.dev/reference/react/Suspense

<Suspense> – React