[React]react-spinners를 사용한 Loading 창 만들기(Modal 안에 Loading 창 넣기)

react-spinners를 사용한 로딩창 만들기

modal을 활용해서 만들면 화면 위에 Loading창이 띄워지게 만들기 가능

공통 함수로 만들어 놓고 사용하면 유용하게 사용 가능

 

필요한 모듈 설치

react-spinners 

npm install --save react-spinners

react-bootstrap의 modal을 사용하기 위해 설치

npm install --save react-bootstrap

 

LoadingModal.js

//Moudle
import React, { useEffect, useState } from "react";
import { Button, Modal, ModalDialog } from "react-bootstrap";
import "../css/User.css";
import Loader from "react-spinners/RotateLoader";
import { css } from "@emotion/react";
const override = css`
    display: block;
    margin: 0 auto;
`;
const LoadingModal = (props) => {
    const [loading, setLoading] = useState(true);
    const [color, setColor] = useState("#19DBB4");

    return (
        <>
            <Modal
                {...props}
                centered
                show={props.show}
                // onHide={() => props.setShow(false)}
                dialogClassName="loading-container"
                style={{ backgroundColor: "rgba(30,30,30,0.5)" }}
            >
                <Modal.Body style={{ display: "none" }}></Modal.Body>
                <div className="overlay-box" width="100%">
                    <Loader
                        color={color}
                        loading={props.show}
                        css={override}
                        size={15}
                        // height={400}
                        // width={100}
                        // radius={10}
                        // margin={20}
                        speedMultiplier={0.4}
                    />
                    <p style={{ marginTop: "40px", color: "rgb(1B1D1D)", fontWeight: "bold" }}>Loading...</p>
                </div>
            </Modal>
        </>
    );
};

export default LoadingModal;

Modal.body에 넣어놓으면 엄청 이쁘지 않은 로딩창이 나오는 걸 볼 수 있습니다.

Modal.body는 none으로 바꿔주시고 div를 새로 만들어서 진행해야 합니다.

이렇게만 해놓고 css 파일을 적용하지 않으면 overlay가 제대로 되지 않음.

 

/* Loading Bar  css */

.loading-container {
    border: 0px;
    background: rgba(0, 0, 0, 0);
    z-index: -1;
    content: none;
}
.loading-container > div.modal-content {
    border: 0px;
}
.overlay-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    background: rgba(255, 255, 255, 0);

    z-index: 1000;
}

css를 위의 코드처럼 적용해줘야 이쁘게 오버레이가 됩니다. (글 포스팅하는데 CSS 때문에 고생했던 기억이 새록새록 나네요.)

 

저는 modal로 만들어놓고 modal show 값을 state로 변경, props로 넘겨주면서 사용 중입니다.

    const onClickHandler = () => {
    	/*LOADING MODAL OPEN*/
        setModalShowLoading(true);
        axios
            .post(`${process.env.REACT_APP_SERVER}/api/서버요청경로`, {}, headers)
            .then((res) => {})
            .catch((err) => {})
            .finally(() => {
                /*LOADING MODAL CLOSE*/
                setModalShowLoading(false);
            });
    };

<div className="modal-box">
    {modalShowLoading ? (
        <LoadingModal show={modalShowLoading} setShow={setModalShowLoading}></LoadingModal>
    ) : null}
</div>

위의 코드에서 사용한 RotateLodar 말고 더 다양한 로딩 모양을 원한다면 Loader import 부분을 아래의 표를 참고하여 바꿔주시면 됩니다.

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

react-spinners