동적인 모달창 만들기

동적인 UI 만드는 step

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

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

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

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

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

• 모달창은 열림/닫힘이 있기 때문에 2종류만 표현할 수 있는 자료형으로 선언해도 됨

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

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

이런 원리로 코드를 작성하면 됨

function App (){

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

JSX에서 조건문 쓰는 법

• 조건문은 if / else 문법을 쓰면 되지만 JSX 안에서는 if else 문법을 바로 사용할 수 없다.
  • 그대신 '삼항연산자'라는 걸 사용

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

• 맞음이 출력

3 > 1 ? console.log('맞음') : console.log('아님')

• 따라서 위 코드에서 state가 true면 모달 컴포넌트를 보여주고 false면 아무것도 보여주지 말라고 하려면

function App (){

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

글제목 눌렀을 때 모달창 띄우기

• 글제목 눌렀을 때 state를 조절해주라고 코드를 작성

function App (){

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