5-1. [React + Express + MongoDB] Perfect Boiler 유지보수 => 로딩창 만들기 + alert창 모달창으로 바꾸기

 

 

 

인증메일 구현을 완성하고 보니, 노드메일러를 통해 메일이 발송되기까지 약 5~10초정도의 딜레이가 걸리는 사실을 알게 되었다. 따라서 로딩 상태를 만들어주고, loading State가 true일 경우에 로딩창을 띄운 뒤 완성되면 사라지도록 하기 위해 loading 스테이트를 추가해 주었다.

const [loading, setLoading] = useState(false);

 

 

그리고 못생긴 alert창을 바꿔주기 위해 모달을 새로 디자인했다. props를 통해 메세지를 전달받아, 그때그때 재사용 할 수 있도록 만들었다.

import React, { useState, useEffect } from "react";
import Button from "react-bootstrap/Button";
import Modal from "react-bootstrap/Modal";

function Message(props) {
  return (
    <>
      <Modal
        size="sm"
        style={{
          textAlign: "center",
        }}
        show={props.messageShow}
        centered
        keyboard={false}
      >
        <Modal.Body style={{ fontSize: "15px", fontWeight: "bold" }}>
          <div>{props.message}</div>
          <Button
            size="sm"
            style={{ marginTop: "10px", width: "100%" }}
            onClick={() => {
              props.setmessageShow(false);
            }}
          >
            닫기
          </Button>
        </Modal.Body>
      </Modal>
    </>
  );
}

export default Message;

 

async와 await을 통해 로딩 state가 먼저 바뀌게 해준 뒤, loading이 true면 로딩창을 보여주고, Modal창을 띄울 때 loading을 false로 바꾸어 상황에 맞는 모달창을 띄워주면 완성! 

const sendEmail = async () => {
    let user = {
      id: id,
      email: email,
    };
    setLoading(true);
    try {
      console.log(loading);
      await axios
        .post(`.../authEmail`, user, {
          withCredentials: true,
        })
        .then((response) => {
          setableId(response.data.joinable);
          if (response.data.joinable === false) {
            setModal("사용 불가능한 이메일입니다.");
          } else {
            setAuthButton(true);
            setModal("인증 메일을 발송하였습니다.");
          }
        });
    } catch (e) {
      console.log(e, "에러");
      setLoading(false);
    }
  };

  function inspectEmailRouter() {
    sendEmail();
  }
  
  ...
  
   {loading ? <Loading /> : ""}