[React] React hook useState를 사용해 modal창 만들기

프로젝트를 하면서 modal창을 직접 만들어 쓰곤 했는데

기록한 적은 없었던 것 같아 글을 써본다.

 

React hooks usestate를 사용해 modal창을 만들었다.

 

 

클릭 전 화면

클릭 후 화면

 

폴더 구조

//App.js
import React, { useEffect } from "react";
import AppRouter from "./AppRouter";
function App() {
  return <AppRouter />;
}
export default App;

//AppRouter.tsx
import React, { useState } from "react";
import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";
import Home from "./component/Home";

const AppRouter = () => {
  const [isLoggedIn, setIsLoggedIn] = useState<Boolean>(false);
  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route path="/home/*" element={<Home />} />
          <Route path="/*" element={<Navigate replace to="/home" />} />
        </Routes>
      </BrowserRouter>
    </>
  );
};
export default AppRouter;

 

Home.tsx

//Home.tsx
import "./home.scss";
import { useState } from "react";
import Modal from "./Modal";

const Home = () => {
  const [modalState, setModalState] = useState<boolean>(false);
  const onModalOpen = () => {
    setModalState(!modalState);
  };

  return (
    <div className="home-top-container">
      <h1 className="home-header">Modal Practice</h1>
      <span className="home-modal-open-Button" onClick={onModalOpen}>
        modal 열기
      </span>

      {modalState && (
        <Modal modalState={modalState} setModalState={setModalState} />
      )}
    </div>
  );
};

export default Home;

// home.scss
.home-top-container {
  padding: 40px;

  .home-header {
    margin-bottom: 40px;
  }
  .home-modal-open-Button {
    border: 1px solid rgb(208, 208, 208);
    border-radius: 7px;
    padding: 8px;
  }
}

 

Modal.tsx

//Modal.tsx
import "./modal.scss";

interface ModalProps {
  modalState: boolean;
  setModalState: React.Dispatch<React.SetStateAction<boolean>>;
}
const Modal = ({ modalState, setModalState }: ModalProps) => {
  const onClickCloseButton = () => {
    setModalState(!modalState);
  };
  return (
    <div className="modal-top-container">
      <div className="modal-container">
        <div className="modal-header">
          modal header
          <span className="modal-close-button" onClick={onClickCloseButton}>
            ✖
          </span>
        </div>

        <div className="modal-content">
          <p>React에서 react hook useState를 사용해</p>
          <p>modal창 만들어 보세요!</p>
        </div>

        <footer>modal footer</footer>
      </div>
    </div>
  );
};

export default Modal;

// modal.scss
$custum-color: #000000;
$custum-opacity: 0.5;

.modal-top-container {
  background-color: rgba($custum-color, $custum-opacity);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-container {
  position: relative;
  border-radius: 10px;
  background-color: rgb(235, 235, 235);
  margin: 0 auto;
  width: 400px;
  height: 250px;

  .modal-header {
    position: relative;
    background-color: #dadada;
    border-radius: 5px;
    text-align: left;
    padding: 15px;

    .modal-close-button {
      position: absolute;
      border: none;
      top: 15px;
      right: 15px;
      width: 30px;
      text-align: center;
    }
  }

  .modal-content {
    padding: 30px;
    border-bottom: 1px solid #c2c2c2;
    p {
      line-height: 20px;
    }
  }

  footer {
    position: absolute;
    bottom: 15px;
    right: 15px;
  }
}