동적인 UI만드는 STEP

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

html작성

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

css작성

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

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

  let [modal, setModal] = useState(보이고 안보이고가 들어가면됨)

useState(보이고 안보이고가 들어가면됨) 괄호안에는 문자든 숫자든 형식은 상관없다~ 페이지를 처음 열었을때 모달창이 안보여야 하니까 false를 넣어주자.

  let [modal, setModal] = useState(false) //스위치역할

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

조건문을 써야 한다면 삼항연산자를 사용하자

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

{
1 == 1 ? '맞음' : '아님'
}

state가 false면 안보이게
state가 true면 보이게

function App () {
    let [글제목, 글제목변경] = useState(['트렌치 코트 추천', '아동 신발 추천', '주방 용품 추천'])
    let [숫자, 숫자변경] = useState(0)
    let [modal, setModal] = useState(false)
	return(
    <div className='App'>
      <div className='list'>
        <h4>{글제목[0]}</h4>
      </div>
      <div className='list'>
        <h4>{글제목[1]}</h4>
      </div>
      <div className='list'>
        <h4>{글제목[2]}</h4>
      </div>

      {
      	modal == true ? <Modal/> : null  //기계역할
      }

    </div>
  )
}

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

** 3번째 제목을 클릭하면 모달창을 띄워보자~ 클릭시 state만 조절하면 된다

스위치와 기계를 만들어놓는다고 생가하면 된다. 스위치를 누르면 기계가 작동하도록 만들자.

  let [modal, setModal] = useState(false) //스위치역할

      {
      	modal == true ? <Modal/> : null  //기계역할
      }

전체코드

function App () {
	let [글제목, 글제목변경] = useState(['트렌치 코트 추천', '아동 신발 추천', '주방 용품 추천'])
    let [숫자, 숫자변경] = useState(0)
  	let [modal, setModal] = useState(false);
	return(
    <div className='App'>
      <div className='list'>
        <h4>{글제목[0]}</h4>
      </div>
      <div className='list'>
        <h4>{글제목[1]}</h4>
      </div>
      <div className='list'>
        <h4 onClick={()=>{setModal(true)}}>
          {글제목[2]}</h4>
      </div>

      {
      	modal == true ? <Modal /> : null  //기계역할
      }

    </div>
  )
}

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

다시 클릭하면 모달창이 사라지게 하고 싶다면?

    <div className='list'>
    <h4 onClick={()=>{setModal(!modal}}>
      {글제목[2]}</h4>
  </div>

!modal로 바꿔주면된다.

느낌표가 대체 뭐길래???

우측자료를 반대로 바꿔준다.
!true는 출력해보면 false를 의미하고
!false는 true를 의미한다.

클릭전에는 modal state상태가 false이니까 모달창이 안보이고
클릭후에는 modal state상태가 false에서 true로 바꿔져서 뜨게 된다.
또 다시 클릭하면 modal state상태가 true에서 false로 변경된다.