[개인과제] React로 모달창 구현하기

개요

리액트로 모달창을 구현해봤다.

모달창 구현

import React, { useState } from "react";
import * as N from "layouts/Nav/NavStyle";
import Modal from "components/Modal";
import MenuButton from "components/Button";

const Nav = ({ charactersMenu }) => {
  const [modal, setModal] = useState(false);

  const clickModalOpen = () => {
    console.log("모달창 오픈");
    setModal(true);
  };

  return (
    <N.Navbar>
      <MenuButton
        clickModalOpen={clickModalOpen}
        charactersMenu={charactersMenu}
      />
      {modal === true ? <Modal /> : null}
    </N.Navbar>
  );
};

export default Nav;