React 모달창 만들기

Main.jsx 페이지에서 LogoutButton을 누르면
Logout.jsx 모달 페이지가 뜨도록 만들기

Main.jsx 페이지에서

import React, {useState} from "react";
import Logout from './Logout';

export default function MyPageMain() {

  const [isModalOpen, setIsModalOpen] = useState(false);
  
  return (
  
  	<LogoutButton onClick={() => {setIsModalOpen(true)}}>
    	로그아웃
    </LogoutButton>
    <Logout isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />
          
  )
}

이렇게 해주고

Logout.jsx에서는

export default function Logout({ isOpen, onClose }) {

  const navigate = useNavigate();
  
  const navigateToHome = () => {
    navigate("/");
  };

  if (!isOpen) {
    return null;
  }

  return (

        <ButtonContainer>
            <CloseButton onClick={onClose}>
                취소
            </CloseButton>
            <RealLogoutButton onClick={navigateToHome}>
                로그아웃
            </RealLogoutButton>
        </ButtonContainer>
  );
}

하면 된다