#동적인 UI 만들기 #state 이용 # onclick Modal

동적인 UI 만드는 3 step

 

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

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

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

  // false : 안보이는 상태, true : 보이는 상태 ~ 자유롭게 작성가능
  let[modal, setModal] = useState(false);

3. state 에 따라 UI 가 어떻게 바뀔지  작성

<h4 onClick={()=>{ setModal(!modal) }}>{title[2]}</h4>

App 내에서 js 사용불가 
- HTML 내용 들어가는 공간이기 때문에
- 그럼 어떻게? => 삼항연산자 사용 (ternary operator)

      {  // App 내에서 js 사용불가  - 삼항연산자 사용
          modal == true ? <Modal/> : null
      }

 

---