개발/react
[react 기록용]1-8.'남자 코트'클릭하면 동작하는 UI (모달창) 만들기
연별(YeonStar)
2021. 3. 30. 00:03
/*eslint-dialbed */
import React, { useState } from 'react';
import './App.css';
function App() {
let [글제목1, 글제목변경] = useState(['남자 코트', '강남 맛집', '파이썬 배우기']);
let [modal, modal변경] = useState(false);
return (
<div className="App">
<div className="list">
<h3 onClick={()=>{ modal변경(!modal) }}>{ 글제목[0] }</h3>
<p>2월 17일 발행</p>
<hr />
</div>
{
modal == true
? <Modal></Modal>
: null
}
</div>
);
}
function Modal(){
return (
<div className="modal">
<h2>제목</h2>
<p>날짜</p>
<p>상세내용</p>
</div>
)
}
export default App;