[React] npm 라이브러리 React Spinners 사용법

https://www.npmjs.com/package/react-spinners

react-spinners

에서 데모

 

 

1. 터미널에서 설치

npm install --save react-spinners

 

 

2. 코드에 import와 사용하는 컴포넌트 넣기 (다른 BarLoader 모양 쓰고 싶으면 위에꺼에서 ClipLoader대신  BarLoader 쓰면 됨)

 

▼ClipLoader 모양 예시

import ClipLoader from "react-spinners/ClipLoader";

 <ClipLoader color={color} loading={loading} cssOverride={override} size={150} />

 

▼MoonLoader ) 모양 예시

import MoonLoader from "react-spinners/MoonLoader";

 

MoonLoader ) 아래에서 각각 선택후 show code 복붙해서 코드에 컴포넌트 넣기

 

 

/* npm React Spinners 라이브러리 (로딩->데이터없을때 실행시키기, 데이터있으면 아래꺼 map실행)*/
  if (loading) {
    return (
      <MoonLoader
        color="#ef1a1a"
        cssOverride={{
          position: "absolute",
          top: "50%",
          transform: "translate(-50%,-50%)",
        }}
        loading
        size={150}
        speedMultiplier={1}
      />
    );
  }
...

 

▼ 다시 수정된 전체 코드 (react17>src>components>VideoList>index.js)

import React from "react";
import "./index.css";
import VideoItem from "../VideoItem";
import { useDispatch, useSelector } from "react-redux";
import { useEffect } from "react";
import { getVideoList } from "./../../store/video/videoSlice";
import { videoUrl } from "./../../lib/api";
import MoonLoader from "react-spinners/MoonLoader"; /* npm React Spinners 라이브러리 중 MoonLoader 모양 사용 */

const VideoList = ({ display }) => {
  const dispatch = useDispatch();
  const { data, loading } = useSelector((state) => state.video);
  useEffect(() => {
    dispatch(getVideoList(videoUrl));
  }, []);

  /* npm React Spinners 라이브러리 (로딩->데이터없을때 실행시키기, 데이터있으면 아래꺼 map실행)*/
  if (loading) {
    return (
      <MoonLoader
        color="#ef1a1a"
        cssOverride={{
          position: "absolute",
          top: "50%",
          left: "50%",
          transform: "translate(-50%,-50%)",
        }}
        loading
        size={150}
        speedMultiplier={1}
      />
    );
  }
  return (
    <ul
      className={
        display === "grid" ? "videoList VideoGrid" : "videoList VideoRowList"
      }
    >
      {data.map((item, idx) => (
        <VideoItem
          key={item.snippet.thumbnails.default.url}
          item={item.snippet}
          value={item}
        />
      ))}
    </ul>
  );
};

export default VideoList;

 

▼ 다시 수정된 전체 코드 (react17>src>store>video>videoSlice.js)

import axios from "axios";
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

export const getVideoList = createAsyncThunk("GET_VIDEO_LIST", async (url) => {
  try {
    const res = await axios.get(url);
    return res.data.items;
  } catch (err) {
    console.log(err);
  }
});

const videoSlice = createSlice({
  name: "video",
  initialState: {
    data: [],
    listLayout: "grid",
    loading: true /* npm React Spinners 라이브러리 사용으로 만든 변수*/,
  },
  reducers: {
    videoListLayout: (state, action) => {
      state.listLayout = action.payload;
    },
  },
  extraReducers: (builder) => {
    /* npm React Spinners/.pending: 지정,들어오고있는지 판단 */
    builder.addCase(getVideoList.pending, (state, action) => {
      state.loading = true;
    });
    /*.fulfilled */
    builder.addCase(getVideoList.fulfilled, (state, action) => {
      /* console.log("액션페이로드", action.payload); */
      state.data = action.payload;
      state.loading = false;
    });
    /*.rejected*/
    builder.addCase(getVideoList.rejected, (state, action) => {
      state.loading = true;
    });
  },
});

export const { videoListLayout } = videoSlice.actions;
export default videoSlice.reducer;