| React | 동적인 UI 만드는 step + 모달창 스위치만들기

< 동적인 UI 만드는 step > 
1. html css로 미리 UI 디자인을 다 해놓고
2. UI의 현재 상태를 state로 저장해두고
3. state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성

 

---

# 제목을 클릭시 모달창이 스위치처럼 만들기 

function App (){

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

👉 위에 있는 step대로 하면 된다.

 

1. 모달창 디자인은 했다 치고 (css파일로)

 

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

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

초깃값은 false 설정함. 

( 초깃값은 '닫았다', '0'  알아볼 수 있게 아무렇게나 표현해도됨 )

 

 

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

(JSX 안에서는 if else 문법을 바로 사용할 수 없어서 ! 삼항연산자 쓰기)

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

해석: 저 state가 true면 <Modal></Modal>  false면 아무것도 보여주지마세요.

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

 

 

❗ 이제부터 버튼 클릭시 모달창을 스위치처럼 하는 코드

 

글제목 클릭시

지금 state가 true면 setModal(false)

지금 state가 false면 setModal(true)

이렇게 해주면 된다. 

 

<button onClick={ ()=>{ setModal(!modal) } }> 

하지만 이렇게 간단하게 표현할 수 있다. 

!true는 출력해보면 false

!false는 출력해보면 true

 

 

---

< 리액트에서 UI만드는 과정은 스위치와 전등 >

스위치는 state, 전등은 컴포넌트

1. 일단 전등이쁘게 달아놓고
2. 스위치랑 연결하고
3. 스위치를 on으로 놓으면 불이 켜지고 off로 놓으면 불이 꺼지도록

 

 

[참고]

코딩애플