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

리동적인 UI 가 뭐나면, 유저가 조작시 형태가 바뀌는 

모달창, 탭, 서브메뉴, 툴팁, 경고문 등 그런 UI를 의미합니다.

 

동적인 UI 만드는 방법

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

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

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

 

1번은 했으니 2번부터 할거임

 

 

 

 

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

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

 

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

useState 안에 무슨 자료를 넣어야 되냐면 정말 마음대로 하면됨

모달창은 열림 or 닫힘 이 두개 상태밖에 없기 때문에 그거 2종류만 표현할 수 있는 자료형이면 됨

나는 코딩애플님처럼 true/false 로 가겠음

 

 

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

function App(){

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

자바슥에서서는 if/else 구문을 썻지만, JSX안에서는 if else 문법을 바로 사용할 수 X

대신에 삼항연산자라는게 사용가능합니다

 

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

function App (){

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

 

 

 

 

글제목 클릭하면 모달창을 띄우고 싶어요

function App (){

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

글제목 누르면 state를 true 로 바꿔달라고 코드 짯습니다

 

그래서 리액트에서 UI만드는 과정을 비유하면

스위치와 전등만드는 거랑 비슷함

 

1. 일단 전등을 이쁘게 달아놓고

=> html/css 만들기

 

2. 스위치랑 연결하고 =>  

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

 

3. 스위치를 on으로 놓으면, 불이 켜지고 off 로 놓으면 불꺼지도록

{setModal(true)}}>{글제목[0]}

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

스위치는 State, 전등은 <Modal> 임

 

 

 

 

글제목을 한번 더 누르면 모달창이 닫혀야 합니다

글제목 클릭시

지금 state가 true면 setModal(false)

지금 state가 false면 setModal(true)

 

<div className='list'>
    <h4 onClick ={()=> { modal == true ? setModal(false) : setModal(true) }}>{글제목[2]}</h4> 
    <p>2월 17일 발행</p>
    </div>
    {
      modal == true ? <Modal/> : null
    }

또는 이렇게 써도됨

function App (){

  let [modal, setModal] = useState(false);
  return (
    <div>
      (생략)
      <button onClick={ ()=>{ setModal(!modal) } }> {글제목[0]} </button>
      { //기존의 모달과 반대 모달을 넣어줘~!
         modal == true ? <Modal></Modal> : null
      }
    </div>
  )
}