[문법] 컴포넌트, 삼항 연산자, Modal 창 제어하기

 

* 버튼 클릭하면 보이고 안 보이는 동작 구현

1. Modal 컴포넌트를 만든다.
2. useState로 제어할 부분을 하나 만든다.
3. 삼항연산자식 적는다.

4. 버튼에 onClick시 변경할 부분을 적는다.

import { useState } from 'react'

function App() {
  let [modal, setModal] = useState(false);
  
  return (
    <>
    	// 누르면 무조건 보여라(true)
        <button onClick={() => {
          setModal(true);
        }}>모달창</button>
        
        // true면 false로 만들고 false면 true로 만들어라
    	<button onClick={() => {
          setModal(!modal);
        }}>모달창</button>
        
        // 삼항연산자
        {modal === true ? <Modal /> : null}
    </>
  )
}

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

 

 

useState로 제어하고 삼항연산자로 구분!

 

쉬운 것 같은데 처음이라 그런지 은근.. 어렵당..ㅜ.ㅜ