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

리액트에서 동적인 UI 만들기

1. Html Css 미리 UI 디자인
2. UI의 현재 상태를 state로 저장
3. state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성
4. 이벤트를 이용하여 모달창을 보이게 또는 안보이게 하기

하나씩 자세히 살펴보자면

 

1. Html CSS UI 디자인

function 함수명(){
  return ( <div></div> )
}

//또는

let 함수명 = () => {
  return ( <div></div>) 
}

 

안에 내용을 넣어줌

 

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

state를 하나 만들고 현재 UI의 상태정보를 저장

 

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

//또는

let [modal, setModal] = useState('닫힘');
let [modal, setModal] = useState(0);

//등

 

영어로 작명시 state변경함수는 set을 앞에 붙이는게 관습

현재 모달창의 상태만 표현할 수 있는 자료를 state에 넣어줌

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

 

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

function App (){

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

 

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

 

JSX에서 조건문 쓰는 법

조건문은 if / else 문법을 쓰면 되는데 JSX 안에서는 if else 문법을 바로 사용할 수 없음

하지만 if 문법 대신 삼항연산자라는건 JSX 중괄호 안에서 사용가능 함

 

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

 

if문 대신 사용할 수 있는 문법이 삼항연산자

 

4. 이벤트를 이용하여 모달창을 보이게 또는 안보이게 하기

<div
  onClick={() => {
    modal == true ? setModal(false) : setModal(true);
  }}
>

<div
  onClick={() => {
    setModal(!modal);
  }}
>

 

지정된 곳에 원하는 이벤트를 넣어 modal의 state를 변경해줌

삼항연산자를 이용하거나 if문 또는 not연산자를 이용해 마음대로 변경해주면 됨