모달 버튼 열고 닫기

// App.jsx
import React, { useState } from 'react';
import './App.css';
import Modal from './Modal';

function App() {
  const [showModal, setShowModal] = useState(false);

  return (
    <div className="app">
      <h1>모달 테스트</h1>
      <button onClick={() => setShowModal(true)}>
        모달 열기
      </button>

      {showModal && (
        <Modal onClose={() => setShowModal(false)} />
      )}
    </div>
  );
}

export default App;

/* App.css */
.app {
  padding: 20px;
  text-align: center;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

// Modal.jsx
import React, { useEffect } from 'react';
import './Modal.css';

function Modal({ onClose }) {
  useEffect(() => {
    console.log("🎉 모달이 나타났습니다! (마운트)");

    // cleanup 함수
    return () => {
      console.log("👋 모달이 사라집니다! (언마운트)");
    };
  }, []);

  return (
    <div className="modal-backdrop">
      <div className="modal-content">
        <h2>안녕하세요!</h2>
        <p>이것은 모달입니다.</p>
        <button onClick={onClose}>닫기</button>
      </div>
    </div>
  );
}

export default Modal;

  /* Modal.css */
  .modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    width: 300px;
  }

// main.jsx
import { createRoot } from 'react-dom/client'
import Components from './App.jsx';

createRoot(document.getElementById('root')).render(
  <Components />
)