동적인 UI 만들기: 모달창

동적인 UI란 사용자가 조작시 형태가 바뀌는

모달창, 탭, 서브메뉴, 툴팁, 경고문 등 을 의미한다.

3-step

1. html, css로 미리 UI 디자인을 만든다.

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

.modal {
  margin-top: 20px;
  padding: 20px;
  background: #f1f1f1;
  text-align: left
}

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

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

영어로 작명시 state변경함수는 set을 앞에 붙이는게 관습이다.

1. state에 따라서 UI가 어떻게 보일지 제어한다.

function App (){

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

조건문

jsx안에서는 if else 문법을 바로 사용할 수 없다.

대신에 삼항연산자를 사용 가능하다.

조건식 ? 조건식이 참일 경우  : 조건식이 거짓일 경우

function App (){

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