React 동적 UI 만들기 (모달창)

리액트에서 동적인 UI 만드는 step

1. html css로 미리 UI 디자인을 다 해놓고

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

3. state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성

---

UI의 현재 상태를 state로 저장

state 만들고 거기에 현재 UI 상태정보 저장해두라는 소리

let [modal, setModal] = useState(false); //state(modal) false로 저장

state 변경함수는 관습적으로 set붙이는게 맞음

여기서 state에 false 넣어놨는데 걍 내맘대로 아무거나 넣어도됨

현재 모달창 상태만 표현할 수 있으면 되는데

열림/닫힘 두 개 상태만 표현하면 되기 때문에 true / false로 한거임

// 이런 형식으로 state 설정해도 된다는소리임
let [modal, setModal] = useState('닫힘');
let [modal, setModal] = useState(0);

---

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

function App (){

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

위에처럼 코드 짜면 되는데

---

JSX에서 조건문 쓰는 법

if/else 문법 못씀

이거 대신 삼항연산자라는거 쓰면됨

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

이렇게 if문 대신 쓸 수 있음

//이렇게 쓰면 3>1 이게 참이니까 '맞음'이 출력됨
3 > 1 ? console.log('맞음') : console.log('아님') 

모달창으로 돌아가서 삼항연산자 적용하면 아래 코드

function App (){

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

null은 그냥 아무 html도 남기기 싫을 때 쓰는 자료임 null은 텅 비었다는 뜻

---

글제목 누르면 모달창을 띄우고 싶어요

지금은 모달창이 안보임 왜냐? state 기본값이 false로 설정되어있는데 삼항연산자가 참일때 모달창 띄우라고 되어있잖슴

그럼 글제목 눌렀을때 state를 true로 변경해주세요~ 라고 코드 짜면 될듯

function App (){

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

---

글제목 한번 더 누르면 모달창 닫히게는 어케함

function App (){

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

state 값에 ! 붙이면 state에 담겨있던 true / false 가 누를때마다 바뀜

그럼 true => false로 변경되면 삼항연산자에 의해서 닫히고

false => true로 변하면 다시 열리겠죠..

---

• 빡대가리식 정리

1. 전등이쁘게 달아놓고

2. 스위치랑 연결하고

3. 스위치를 on으로 놓으면 불이 켜지고 off로 놓으면 불이 꺼지도록 만들면 되는거임 그리고 나중에 필요할때 스위치 조작하면 되는거고

   스위치는 state , 전등은 Modal임