[CHAM] 모달창 만들기

라우팅을 많이 쓰지 않고 버튼들과 모달창을 컨셉으로 홈페이지를 만들려고 했다.

그렇기 때문에 이 홈페이지에서 모달창이 차지하는 비중은 클것이라고 생각했고 컴포넌트화에 신경썼다.

 

모달만들기

컴포넌트화를 위해서는 코드를 작성하기전 구조를 먼저 파악하고 어떤식으로 구성을 할지 미리 생각해야했다.

이 부분을 생각하면서 처음에는 정말 힘들었지만 구조가 이해될수록 할만 하다는 생각이 들었다.

 

그렇게 모달을 만드는 순서를 3가지로 정리했다.

1. 모달창을 띄우는 버튼 생성

2. 버튼의 텍스트를 받는 곳

3. 텍스트에 따라 다른 컴포넌트 모달을 띄운다.

 

 

1. 모달창을 띄우는 버튼

Modal_btn.js

import React, { useState } from "react";
import Modal from "./Modal";
const Modal_btn = ({ text, className, data }) => {
  const [modal, setModal] = useState(false);
  const showModal = (e) => {
    setModal(true);
  };
  return (
    <>
      <button className={className} onClick={showModal}>
        {text}
      </button>
      {modal ? <Modal type={text} setModal={setModal} data={data} /> : ""}
    </>
  );
};

export default Modal_btn;

나는 Font Awesome에서 아이콘을 이용한다. 이는 아이콘을 활용하기 위해선는 클래스네임을 붙여줘야한다.

그리고 각각의 버튼마다 class를 지정하여 스타일을 다르게할 필요도 있었기 때문에 className도 props로 받았다.

 

각각의 모달창마다 전달할 data가 다르기 때문에 data라는 props도 받아서 공통으로 넘겼다.

이 버튼은 모달창을 띄우기위한 버튼으로 사용했다.

2. 버튼의 텍스트를 받고 모달을 띄우는 곳

Modal.js

import React from "react";
import LoginModal from "./LoginAction/LoginModal";
import SignUpModal from "./SignUpModal/SignUpModal";
import LogoutModal from "./LoginAction/LogoutModal";

const Modal = ({ setModal, type, data }) => {
  const closeModal = (e) => {
    if (e.currentTarget === e.target) setModal(false);
  };
  switch (type) {
    case "SIGN UP":
      return <SignUpModal closeModal={closeModal} setModal={setModal} />;
    case "LOGIN":
      return <LoginModal closeModal={closeModal} setModal={setModal} />;
    case "LOGOUT":
      return <LogoutModal closeModal={closeModal} setModal={setModal} />;
  default:
  return;
  }
};

export default Modal;

이곳에서 각 모달들의 컴포넌트를 받아 return한다.

모달들을 굉장히 많이 만들것 같아서 나중에 보기 편하게 미리 switch문으로 return을 했다.

3. 모달 컴포넌트

LoginAction/LogoutModal.js

import React from "react";
import { ModalWrap, Wrap, Title, Content, LastBtn } from "../ModalStyledComponents";
import { useDispatch } from "react-redux";
const ModalBase = ({ closeModal, setModal }) => {
  const dispatch = useDispatch();
  const logout = () => {
    dispatch({ type: "LOGOUT" });
    setModal(false);
  };
  return (
    <ModalWrap onClick={closeModal}>
      <Wrap>
        <Title>LogOut?</Title>
        <Content style={{ flexDirection: "row" }}>
          <LastBtn onClick={logout}>Yes</LastBtn>
          <LastBtn
            onClick={() => {
              setModal(false);
            }}
          >
            No
          </LastBtn>
        </Content>
      </Wrap>
    </ModalWrap>
  );
};

export default ModalBase;

closeModal 을 props로 받아 onClick에 설정해줬다.

좀더 구체화하여 Modal을 만들수 있을것 같았지만 파일을 더 늘리면 보기 복잡해질것같았고 

파일을 더 늘리기보다 styled-component를 이용하여 틀을 통일하도록 했다.

 

이 모달을 설계하고 만들면서 시간은 좀 들었지만 만들고 나서 사용할때는 너무 편했다.

리액트의 재사용성을 실감하게된 코드였다.