리액트 로딩 스피너 라이브러리 react-spinners

오늘은 리액트 로딩 스피너 중 react-spinners 라이브러리를 리뷰하고, 사용법에 대해서 간단히 정리해 보고자 합니다.

웹사이트에서 시간이 걸리는 데이터를 조회할 때 화면의 변화없이 가만히 멈추어 있다면 사용자는 오류가 난 건지 시간이 걸리는 건지 알 수가 없습니다.

따라서 이럴 때 사용하는게 로딩 스피너인데요, 로딩 스피너를 통해서 현재 어떠한 처리가 진행 중임을 알릴 수 있습니다.

이럴 때 유용한 라이브러리가 react-spinners 인데요, Fade, Beat, Sync 등등 다양한 스피너 형태 중 원하는 것을 선택하여 사용할 수 있습니다.

목차 숨기기

1 react-spinners 로딩 스피너 설치

2 react-spinners 사용법

2.1 react-spinners 사용 예시

2.2 react-spinners의 주요 Props

3 그 밖에 도움되는 글

react-spinners 로딩 스피너 설치

reat-spinners 는 아래와 같이 설치할 수 있습니다.

npm i react-spinners

react-spinners 사용법

아래와 같이 간단히 만들어 보았습니다. props 인자로 spinner 타입과 loading 여부를 받습니다.

import {
  MoonLoader,
  BarLoader,
  ClipLoader,
  SyncLoader,
  PulseLoader,
  FadeLoader,
  BeatLoader,
  DotLoader,
  GridLoader,
} from "react-spinners";

type SpinnerProps = {
  type?: string;
  loading?: boolean;
};

const override = {
  display: "block",
  margin: "0 auto",
};

const Spinner = ({ type = "FadeLoader", loading = true }: SpinnerProps) => {
  return (
    <>
      {type === "GridLoader"    (
        <GridLoader
          cssOverride={override}
          loading={loading}
          color="#36d7b7"
        />
      )}

      {type === "MoonLoader"    (
        <MoonLoader
          cssOverride={override}
          loading={loading}
          color="#36d7b7"
        />
      )}

      {type === "BarLoader"    (
        <BarLoader
          cssOverride={override}
          loading={loading}
          color="#36d7b7"
        />
      )}

      {type === "ClipLoader"    (
        <ClipLoader
          cssOverride={override}
          loading={loading}
          color="#0854A0"
        />
      )}

      {type === "SyncLoader"    (
        <SyncLoader
          cssOverride={override}
          loading={loading}
          color="#0854A0"
        />
      )}

      {type === "PulseLoader"    (
        <PulseLoader
          cssOverride={override}
          loading={loading}
          color="#0854A0"
        />
      )}

      {type === "FadeLoader"    (
        <FadeLoader
          cssOverride={override}
          loading={loading}
          color="#0854A0"
        />
      )}

      {type === "BeatLoader"    (
        <BeatLoader
          cssOverride={override}
          loading={loading}
          color="#0854A0"
          speedMultiplier={1.5}
        />
      )}

      {type === "DotLoader"    (
        <DotLoader
          cssOverride={override}
          loading={loading}
          color="#0854A0"
          speedMultiplier={1.5}
        />
      )}
    </>
  );
};

export default Spinner;

react-spinners 사용 예시

대략 아래와 같이 테스트해 볼 수 있으며, loading 여부는 isLoading state 등을 추가하여 제어하면 될 거 같습니다.

(아래의 예시는 mui 라이브러리가 사용되었습니다. Box는 div 등으로 교체하면 됩니다.)

<Box>
        <Box
          display={"flex"}
          gap={"30px"}
        >
          <Spinner />
          <Spinner type="GridLoader" />
          <Spinner type="MoonLoader" />
          <Spinner type="BarLoader" />
          <Spinner type="ClipLoader" />
        </Box>
        <Box
          display={"flex"}
          gap={"30px"}
        >
          <Spinner type="SyncLoader" />
          <Spinner type="PulseLoader" />
          <Spinner type="BeatLoader" />
          <Spinner type="DotLoader" />
        </Box>
      </Box>

아래와 같이 다양한 로딩 스피너를 사용할 수 있습니다.

react-spinner 모음

각 스피너마다 어울리는 형태가 있으니 각각의 상황에 적절한 스피너를 골라서 사용하면 됩니다.

예를 들어, 일반적인 api 데이터 조회에서는 ClipLoader 를 사용하면 적절할 것으로 보이며, 화면 구성 async 하게 처리되며 “점차” 만들어 지는 형태에서는 Fade spinner가 어울릴 거 같습니다.

react-spinners의 주요 Props

스피너의 loading 여부는 loading props로 조절할 수 있습니다. false인 경우 spinner는 사라집니다.

<FadeLoader
  ...
  loading={true}
  ...
/>

스피너의 색깔은 color로 조절할 수 있습니다.

<PulseLoader
  ...
  color="#0854A0"
/>

speedMultiplier props를 통해서 로딩 스피드를 조절할 수 있습니다.

```
<PulseLoader
  ...
  speedMultiplier="1.5"
/>

이상으로 react-spinners 사용법 및 예시를 알아보았습니다. 데이터 처리 로딩 처리시 유용하게 사용해 보시기 바랍니다.

그 밖에 도움되는 글

리액트 Quill 에디터 사용법 (2023)

모던 ProgressBar NProgress 리액트 사용 예시(+RTK Query)