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

React Spinners 설치

$ npm install react-spinners --save

 

Spinners 모양 고르기

React Spinners

위 사이트에 접속하여 원하는 모양의 스피너를 고른다. 나는 FadeLoader를 선택함

 

사용예시

- Loading.jsx

import React from "react";
import FadeLoader from "react-spinners/FadeLoader";

function Loading() {
  return (
    <div class="contentWrap">
      <div
        style={{
          position: "fixed",
          top: "50%",
          left: "50%",
          transform: "translate(-50%, -50%)",
        }}
      >
        <FadeLoader
          color="#C63DEE"
          height={15}
          width={5}
          radius={2}
          margin={2}
        />
      </div>
    </div>
  );
}

export default Loading;

- Result.jsx

 const Result = () => {
    const [loading, setLoading] = useState(null);
    
    useEffect(() => {
    setLoading(true);
      api();
    }, []);
    
    const api = async () => {
    	try {
        ...
        setLoading(false)
        } catch(e) {
        	...
        }
    }
    
    return {
    	...
    {loading && <Loading />}
    }
 }
export default Result;

스피너를 보여줄 결과페이지에서 api가 실행되기 전 스피너의 모습이 보이게하고 api가 실행되고 난 후에는 스피너가 보이지 않게 만들어준다