리액트 로딩 시 스피너 구현하기 (react-loader-spinner)

선 결과 후 과정

사실 굳이 react-loader-spinner를 사용할 필요는 없다.

meterial-UI나 ant-desig 등에도 로딩 스피너가 있기 때문이다.

 

그래도 react-loadert-spinner는 스피너에 특화된 라이브러리이기 때문에 종류도 굉장히 다양하고 무엇보다 가볍다.

 

 

yarn add react-loader-spinner || npm install react-loader-spinner

일단 설치부터 해주자.

Spinner 같이 한 번 만들어주면 여기저기 사용 가능한 친구는 따로 컴포넌트를 만들어주는 게 좋다.

 

 

 

import { RotatingLines } from "react-loader-spinner";
import styles from "./loadingSpiner.module.scss";

export const Spinner = () => {
  return (
    <div className={styles.spinner}>
      <RotatingLines width="30" />
    </div>
  );
};

 

나는 이렇게 만들었다.

 

 

https://mhnpd.github.io/react-loader-spinner/rotating-lines

이외에도 위 링크에 import할 수 있는 모든 타입의 스피너가 정리되어 있으니 그냥 원하는 거 골라서 복사 붙여넣기만 하면 된다.

아무리 나의 기억을 위해 포스팅하는 거라지만 너무 민망할 정도로 간단하다.