[React] 로딩스피너 react-spinners

로딩스피너를 추가할때 사용하기 좋은 라이브러리를 소개하고자 한다.
물론 직접 만들어도 되지만, 간편하게 사용하고 싶으면 로딩스피너 라이브러리를 사용하는걸 추천한다.

설치

yarn add react-spinners

사용방법

react-spinners 공식문서

react-spinner 홈페이지
여기에 들어가보면 여러가지 모양의 스피너가 있다.
각자 해당하는 프로젝트에 어울리는 스피너를 사용해주먄 된다. 나는 BeatLoader를 사용했다.

import React from "react";
import { BeatLoader } from "react-spinners";
import styled from "styled-components";

const LoadingSpinner = ({ isLoading, children }) => {
  if (isLoading) {
    return (
      <SpinnerWrapper>
        <BeatLoader color="#9747FF" size={15} margin={10} />
      </SpinnerWrapper>
    );
  }

  return children;
};

export default LoadingSpinner;

const SpinnerWrapper = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
`;

그리고 사용하고 싶은 곳에,

if (isLoading) return <LoadingSpinner isLoading={isLoading} />

넣어주면 된다.