동적인 UI

---

코딩애플 리엑트 강의 듣고 혼자서 기록하는 것 입니다.

강의 내용 출처는

https://codingapple.com/course/react-basic/

모든 저작권은 코딩애플에게 있습니다.

---

리액트 환경에서 동적인 UI 만드는 법

1) html css로 먼저 UI 디자인을하고

2) UI의 현재 상태를 state로 저장해두기
(보이고 있을지 아닐지 등등)

3) state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성
(버튼 누르면 state(1)로 바꾸고 show하고 버튼을 다시 누르면 0으로 바꾸고 hide하게)

1) html css로 UI 디자인

---

: component로 해서 만들면 된다.

2) UI의 현재 상태를 state로 저장해두기

---

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

state는 modal이라고 작명하고 state 변경함수는 보통 set을 앞에 붙이는게 관습이다.

보임 / 안보임 <- 이 상태를
true / false 이렇게 설정해보자 ( 0 / 1 이렇게 해도 괜찮다.)

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

---

function App() {
let [modal, setModal] = useState(false);
return(
  // false면 modal창 보여주지말고 true면 보여주세요
  )
}

각주 부분 조건문을 코드로 작성하면 되는데

JSX에서 조건문 쓰는 법

---

JSX안에서는 if else문을 바로 사용할 수 없다.
그래서 if else문 대신 삼항 연산자를 사용하는데

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

이렇게 작성하면 된다.

삼항 연산자를 이해하기 위해 숫자로 예시를 들면

3 > 2 ? console.log(true) : console.log(false)

3 > 2는 참 이므로 console창에 true가 나온다.

삼항 연산자는 이러한 logic으로 작동된다.

출처

그럼 삼항 연산자를 사용하여 modal창 조건을 코드로 작성하여보면

modal == true ? <Modal></Modal> : null

응용

버튼을 누르면 modal창이 보이게 해보자

버튼을 만들고 버튼에 onClick 달고 click하면 modal이 true로 바뀌면 될 거같다.

function App (){

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