동적인 UI만드는 3step

동적인 UI란 유저가 조작시 형태가 바뀌는 모달창 탭 서브메뉴 툴팁 경고문 등으 UI들을 의미함

1. html css로 미리 UI 디자인 구현
2. UI의 현재 상태를 state로 저장
3. state에 따라 UI가 어떻게 보일지 조건문 작성

Step1. html css로 미리 디자인

Function Modal(){
  return(
    ...
    )
}

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

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

• 형식은 자유
  : 모달창 상태만 표현 가능하면 됨
• [0,1][false,true], [열림,닫힘] 모두 가능

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

function App (){

  let [modal, setModal] = useState(false);
  return (
    저 state가 true면 <Modal></Modal>
    false면 아무것도 보여주지마세요
  )
}

이런식으로 코드짜면 될 듯
근데 jsx에서는 if조건문이 아닌 삼항연산자를 써야 함

✔️ 삼항연산자

형식

조건식 ? 조건식 참일 때 실행할 코드 : 조건식 거짓일 때 실행할 코드

Sample code

3 > 1 ? console.log('맞음') : console.log('아님')
예를 들어 이렇게 쓰면 3 > 1 이게 참이기 때문에 '맞음'이 출력됨.

function App (){

  let [modal, setModal] = useState(false);
  return (
    <div className="app">
      (생략)
      {
        modal == true ? <Modal></Modal> : null
      }
    </div>
  )
}

삼항연산자를 이용해서 작성했음.

null은 아무 html도 남기기 싫을때 쓰는 자료임

글제목 누르면 모달창 띄우기

function App (){

  let [modal, setModal] = useState(false);
  return (
    <div>
      (생략)
      <button onClick={ ()=>{ setModal(true) } }> {글제목[0]} </button>
      { 
         modal == true ? <Modal></Modal> : null
      }
    </div>
  )
}

📎 응용) 글제목 다시 클릭 시 모달창 닫기

 <h4 onClick = { ()=> {setodal(!modal) }}>글제목</h4>

!modal을 하면 modal의 값을 반대로 바꿔줌