javascript
// 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;
클릭하여 코드 복사
css
/* App.css */
.app {
padding: 20px;
text-align: center;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
클릭하여 코드 복사
javascript
// 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;
클릭하여 코드 복사
css
/* 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;
}
클릭하여 코드 복사
javascript
// main.jsx
import { createRoot } from 'react-dom/client'
import Components from './App.jsx';
createRoot(document.getElementById('root')).render(
<Components />
)
클릭하여 코드 복사
'React > 예제' 카테고리의 다른 글
리액트 앱에서 에러 처리 및 예외 처리 구현하기 (0) | 2025.04.10 |
---|---|
usecontext로 다크 모드 구현 (0) | 2025.04.10 |
컴포넌트 재사용성 - 유튜브 아이템 추가 (0) | 2025.04.09 |
useEffect 예제 - 랜덤 강아지 이미지(무한 새로고침) (0) | 2025.04.09 |
await/async 예제 - 랜덤 강아지 이미지 (0) | 2025.04.08 |