[React] react-spinners(로딩중) 만들기

면접에서 내가 만든 프로젝트에 대한 질문을 받았는데.. 아무런 대답을 하지 못했다.. 그래서 너무너무너너무 민망했다...
그래서 다음에는 이런 민망한 상황이 나오지 않게 하려고 작성한 글입니당.. 😭😢😭

처음으로 알아볼 React library는 react-spinners 라는 라이브러리입니다.

React-spinners 설치

$ npm i react-spinners --save

사용법

내가 사용한 스피너는 ClipLoader이다. 제일 기본이여서 사용하였습니다.

Spinners 모양 선택

www.davidhu.io에 접속하여 원하는 모양의 스피너를 고르면 옵션까지 다 확인할 수 있습니다.

사용한 코드

import React from "react";
import { ClipLoader } from "react-spinners";

const override = {
  display: "flex",
  margin: "0 auto",
  borderColor: "#E50915",
  textAlign: "center",
};

const Loading = ({ loading }) => {
  return (
    <div>
      <ClipLoader
        color="#E50915"
        loading={loading}
        cssOverride={override}
        size={150}
      />
    </div>
  );
};

export default Loading;

사용하는 이유

api를 호출하고 실행되기 전에 화면을 보면 데이터가 없어 사용자들이 볼 때 에러가 난건지 데이터를 가져오는데 오래 걸리는지 알 수 없기 때문에 스피너를 줘서 로딩중이라는 것을 알릴 수 있습니다!