리액트 로딩창 구현

react spinners

리액트에서 로딩창을 구현하는 방법은 여러 가지가 존재하지만, 그중 React spinners 라이브러리를 이용하는 방법을 작성하고자 한다.

(참고로 npm으로 깔 때 오타내서 react-spinner라고 쓰면 리액트는 이해를 못 한다. 이 부분 조심하자.)

React spinner 설치하기

npm install react-spinners

---

사용법 

- Spinner 모양 선택하기 

https://www.davidhu.io/react-spinners/

 

이 사이트에 들어가서 여러 가지 스피너 중 마음에 드는 스피너를 선택하면 된다.

사이트 내에서 커스텀할 수도 있고 리액트 코드에서 확인하면서 커스텀할 수 있다.

색깔 같은 것은 사이트 내에서 바로 확인 가능하다.

(예시코드)

import React from 'react'
import {GridLoader} from 'react-spinners';

// 술사진 로딩 페이지 
const override = {
    span: '20px',
    margin : '0 auto',
    marginTop:'220px',
    textAlign : 'center',
    color : '#fff',
    size : '20'
};

const Loading = ({loading }) =>{
    return (
        <div>
            <GridLoader 
            color = "#fff"
            loading ={loading}
            cssOverride={override}
            size={25}
            speedMultiplier={0.8}
            margin={5}
            />
            <div style = {{
                padding:'20px',
                color:'#fff',
                fontWeight : '700',
            }}>
            <h> 사진을 분석하고 있어요 </h>
            </div>
        </div>
    )
}

export default Loading;

 

당연히 className를 지정해줘 css를 지정해 줄 수 있다. 나의 경우엔 className를 지정해 두고 사용하였다.

spinner의 세팅값으로는 여러 개를 지정할 수 있다. 관련 사항은 공식 사이트를 확인하면 된다.

이후 로딩창을 useState 같은 훅으로 컨트롤해주면 된다.

---

(참고한 글)

https://0lrlokr.tistory.com/103

[React] 리액트 로딩 페이지 만들기 (react-spinners)

---