[React] React Spinner 사용 방법

React Spinner axios interceptor에 적용하기

mobx를 사용해서 store 관리를 하고 있는 프로젝트에 spinner를 적용하게 되어 그 과정을 기록할 것임

 

---

React Spinner 설치

yarn add react-spinners
# or
npm i react-spinners

 

---

Spinner component 생성

스피너 모양은 react-spinners demo 페이지에서 확인 가능

예시

import React from 'react';
import MoonLoader from "react-spinners/MoonLoader";
import { AppStore } from '../store/AppStore';

const Spinner = () => {
  return (
    <div 
      className="spinner" 
      style={{width: '100vw', height: '100vh', position: 'absolute',zIndex: '10',left: '0',top: '0',right: '0',bottom: '0',backgroundColor: 'rgba(0,0,0,0.2)',display: 'block'}}
    >
      <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh'}}>
        <MoonLoader
            color="red"
            loading={AppStore.isRunnig}
            size={30}
        />
      </div>
    </div>
  );
};

export default Spinner;

 

---

AppStore에 등록

예시

import { observable } from "mobx";

export const AppStore = observable({
	isRunnig: false,
    
    /* 스피너 작동 */
    setRunningSpinner() {
        this.isRunnig = true;
    },

    /* 스피너 중지 */
    setStopSpinner() {
        this.isRunnig = false;
    },
})

 

---

axios interceptor에 등록

api 통신중에는 spinner 활성화, 통신완료되면 spinner 비활성화됨

예시

import { AppStore } from '../store/AppStore';

axios.interceptors.request.use(
    config => {
        AppStore.setRunningSpinner();
        return config;
    },
    error => Promise.reject(error)
);

axios.interceptors.response.use(
    async(config) => {
        AppStore.setStopSpinner();
        return config;
    },
    async(error) => {
        AppStore.setStopSpinner();

        return Promise.reject(error);
    }
);

 

 

---

참고 자료 : https://www.npmjs.com/package/react-spinners?activeTab=readme