React 컴포넌트

리액트에서 동적인 UI 만드는 방법

1. html css로 미리 UI 디자인을 다 해놓고

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

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

 

step 1. html css로 미리 디자인해놓기

<div className="modal">
  <h4>제목</h4>
  <p>날짜</p>
  <p>상세내용</p>
</div>

 

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

state 하나 만들고 거기에 현재 UI의 상태정보를 저장

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

let [modal, setModal] = useState('닫힘');
let [modal, setModal] = useState(0);

 

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

function App (){
  let [modal, setModal] = useState(false);
  return (
     //삼항연산자 
     //조건식 ? 참일 때 : 거짓일 때
     modal == true ? <Modal/> : null
  )
}

 

완성된 코드

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

function App() {
  let [modal, setModal] = useState(false)

  return (
    <div className="App">
      {
        //삼항연산자 
        //조건식 ? 참일 때 : 거짓일 때
        modal == true ? <Modal/> : null
      }
    </div>
  );
}

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

export default App;