개발/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;