[React] 동적 UI 만들어보기

1. HTML CSS로 미리 디자인완성

• 리액트 부분이니 디자인은 알잘딱

---

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

let [modal, setModal] = useState(false);

state 문법에서 state변경함수의 이름은 set으로 시작하는 것이 관습이라고 한다.

모달창의 경우 보임, 안보임 두 상태를 컨트롤해야하므로 state를 true, false 두 상태로 나누어 스위치처럼 켜고 끄기 구현을 목표로 한다.

---

3. state에 따라 UI가 어떻게 보일지 작성

{
modal == true ? : null
}
modal state가 true면 실행, false면 null(없음)

리액트를 활용하여 html 태그 내에서 if를 사용하고자 할 때는 if문 대용으로 삼항연산자를 사용한다

삼항연산자
조건식 ? 참일때 실행할 코드 : 거짓일 떄 실행할 코드
예시)
1 == 1 ? ‘맞음’ : ‘아님’ ⇒ 맞음
1 == 2 ? ‘맞음’ : ‘아님’ ⇒ 아님

modal창 on off를 스위치처럼 구현해보기

<h4 onClick={ () => { setModal(modal == true ? false : true) }}> { title[1] } </h4>
onClick={ () => { setModal(modal == true ? false : true) }}
setModal(modal == true ? false : true)
modal == true ? false : true
modal state가 true면 false를, false면 true를 반환하는 삼항연산자
=> setModal(true) or setModal(false)

⇒ modal이 true면 setModal 실행시 modal이 false가 되고
⇒ modal이 false면 setModal 실행시 modal이 true가 됨
⇒ 스위치 방식 구현 완료

think big

<h4 onClick={ () => { setModal(modal == true ? false : true) }}> { title[1] } </h4>
⇒ <h4 onClick={ ()=>{ setModal(!modal) } }> {title[1]} </h4>
!true = false
!false = true
니까..!

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

function App() {

  let [title, b] = useState(['오늘 점심 추천', '오늘 저녁 추천', '내일 아침 추천']);

    // UI의 현재 상태를 state로 저장
  let [modal, setModal] = useState(false);

  return (
      <div className="list">
        <h4 onClick={ () => { setModal(modal == true ? false : true) }}>
          { title[1] } 
        </h4>
        <p>2월 17일 발행</p>
      </div>

            // 삼항연산자로 if문 대체
            // 조건식 ? 참일때 실행할 코드 : 거짓일 떄 실행할 코드
      {
        modal == true ? <Modal></Modal> : null
      }

    </div>
  );
}

function Modal(){
  return(
    <div className='modal'>
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

export default App;