[React] 동적인 UI (모달창 만들기)

1. html css로 미리 디자인 완성

2. UI의 현재 상태를 state로 저장

3. state에 따라 UI가 어떻게 보일지 조건문 등으로 작성

 

html 내에서 조건문(if) 사용 원할 시 삼항연산자로 사용 { 안에 작성 }

import logo from './logo.svg';
import './App.css';
import { useState } from 'react';

function App() {
  let [title, changeTitle] = useState(['남자코트 추천', '강남 맛집 추천', '국내 여행지 추천'])
  let [date, changeDate] = useState('2월 17일 발행')
  let [cnt, plusCnt] = useState(0)
  let [modal, setModal] = useState(false);

  return (
    <div className="App">
      <div className='black-nav'>
        <h4>ReactBlog</h4>
      </div>
      <div className='list'>
        <h3>{title[0]}<span onClick={()=>{plusCnt(cnt+1)}}> ♥</span> {cnt}</h3>
        <p>{date}</p>
      </div>
      <div className='list'>
        <h3>{title[1]}</h3>
        <p>{date}</p>
      </div>
      <div className='list'>
        {/* 제목 클릭시 modal 창 열림 닫힘 반복 */}
        <h3 onClick={()=>{setModal(!modal)}}>{title[2]}</h3>
        <p>{date}</p>
      </div>

      {
        // 조건문 : 삼항연산자로 작성
        //1 == 2 ? 'true' : 'false'
        modal == true ? <Modal/> : null
      }
     
    </div>
  );
}

function Modal(){
  return(
    <div className='modal'>
        <h4>제목</h4>  {/* function App() 안에 있는 함수 사용 불가 ex) {title[0]} */}
        <p>날짜</p>
        <p>상세내용</p>
      </div>
  )
}

export default App;

.black-nav {
  display: flex;
  background-color: black;
  color: white;
  padding-left: 20px;
  text-align: left;
  width: 100%;
}
.list {
  padding-left: 20px;
  text-align: left;
  border-bottom: 1px solid grey;
}
.modal {
  margin-top: 20px;
  padding: 20px;
  background: #eee;
  text-align: left;
}