리액트 환경에서 동적인 UI 만드는 법 (모달창만들기)

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

 

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

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

 

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

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

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

이렇게 코드짜면 완성입니다. 

 

그래서 글제목 누르면 전에 만들었던 <Modal> 이게 뿅 등장하는

모달창 기능을 만들어봅시다. 

 

 

 

step 1. html css로 미리 디자인해놓기

 

 

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

 

state 하나 만들고

거기에 현재 UI의 상태정보를 저장해두라는 소리입니다. 

 

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

저는 modal이라고 작명했습니다.

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

state에 무슨 자료를 넣어야되냐면 정말 맘대로 하면 됩니다.

그냥 현재 모달창의 상태만 표현할 수 있으면 됩니다.

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

 

 

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

'닫힘'/'열림

0/1

아무렇게나 표현해도 상관없습니다. 저는 true/false로 표현해볼 것임

(true false는 참 거짓을 담을 수 있는 boolean이라는 자료형입니다)

 

 

 

 

 

 

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

 

설명하다

 

function App (){

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

이렇게 코드짜라는 소리입니다. 

프로그래밍할 때 "이 경우엔 이렇게 해주세요~" 라고 코드짜고 싶으면 if 조건문을 사용합니다. 

 

 

 

 

 

 

JSX에서 조건문 쓰는 법

 

조건문은 if / else 문법을 쓰면 되는데 

JSX 안에서는 if else 문법을 바로 사용할 수 없습니다.

써보십시오 글자색도 이상해질걸요

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

 

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

이렇게 if문 대신 쓸 수 있는 문법이 삼항연산자입니다. 

 

 

3 > 1 ? console.log('맞음') : console.log('아님') 

예를 들어 이렇게 쓰면 3 > 1 이게 참이기 때문에 '맞음'이 출력됩니다. 

 

 

 

그래서 아까 모달창으로 돌아가서

저 state가 true면 <Modal></Modal> 보여주고 

false면 아무것도 보여주지마세요~

라고 코드짜고 싶으면 어떻게 할까요? 

 

 

 

설명하다

 

function App (){

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

이렇게 코드짜면 됩니다. 

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

이제 3-step 끝입니다.

 

 

 

 

 

 

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

 

지금은 모달창이 안보입니다.

왜냐면 state 기본값이 false였고, false일 경우엔 <Modal> 안보이게 코드짜놔서 그렇습니다. 

 

그럼 이제 글제목을 클릭하면 모달창이 보이게 만들고 싶으면 어떻게 하죠?

어떻게 코드짜야합니까. 

 

힌트는 여러분이

"글제목 누르면 모달 html을 보이게 해주세요" 라고 코드를 짜는게 아니라

"글제목 누르면 state를 조절해주세요" 라고 코드짜면 됩니다.

왜냐면 state 바뀌면 html은 알아서 자동으로 재렌더링됩니다. 

 

 

 

혼자 한번 해보시고 펼쳐보십시오

 

설명하다

 

function App (){

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

글제목 누르면 modal이라는 state를 true로 바꿔달라고 코드짰습니다.

그럼 이제 제목누르면 모달창 보이는 것임 

 

[collapse]

 

 

 

 

 

 

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

스위치와 전등만드는거랑 비슷하다고 보면 됩니다. 

 

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

2. 스위치랑 연결하고

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

만들어놓는 겁니다. 

그리고 나중에 필요하면 스위치 조작만 하면 되는 것임 

스위치는 state, 전등은 <Modal>입니다. 

 

 

 

그래서 예전 쌩자바스크립트로 UI 만드는 것과는 약간 방식이 다릅니다.

쌩자바스크립트는 귀찮게 html을 조작해야했는데

리액트환경에선 html을 직접 조작하지 않습니다. 

 

 

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

어떻게 코드를 짜면 될까요? 

 

최소 1일은 투자해보고 정 안되면 펼쳐봅시다

 

글제목 클릭시

지금 state가 true면 setModal(false)

지금 state가 false면 setModal(true)

이런 코드를 실행하면 됩니다.

if 조건문이나 삼항연산자나 그런거 쓰면 될듯요 

 

 

설명하다

 

function App (){

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

아니면 간단하게 setModal(!modal) 이래도 됩니다.

느낌표가 뭐냐면

느낌표 우측 자료를 반대로 바꿔줍니다. 

!true는 출력해보면 false입니다.

!false는 출력해보면 true입니다.

그래서 저렇게 써도 가능할듯요 

 

 

import {useState} from 'react'

import './App.css';

function App(){

  let [글제목,글제목변경] = useState(['남자 코트 추천','강남 우동맛집','파이썬독학']);

  let [ 따봉, 따봉변경 ] = useState(0);

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

 

 

  return (

    <div className="App">

      <div className="black-nav">

        <h4>ReactBlog</h4>

      </div>

      <button onClick={ ()=>{

      let copy = [...글제목];

      copy.sort((a, b) => b.localeCompare(a)); // 역순 정렬을 위한 비교 함수

      글제목변경(copy)

    } }> 역순 정렬버튼 </button>

       <button onClick={ ()=>{

      let copy = [...글제목];

      copy.sort();

      글제목변경(copy)

    } }> 정렬버튼 </button>

 

     

      <button onClick={ ()=>{

       let copy = [...글제목];

        copy[0] = '여자코트 추천'

        글제목변경(copy);

        }} > 글수정</button>

      <div className="list">

        <h4>{글제목[0]}

        <span onClick={ ()=>{ 따봉변경(따봉 = 따봉 +1) } } >👍</span>

        { 따봉 }</h4>

        <p>2월 17일 발행</p>

      </div>

      <div className="list">

        <h4>{글제목[1]}</h4>

        <p>2월 17일 발행</p>

      </div>

      <div className="list">

        <h4 onClick={() =>{ setModal(!modal) }} >{글제목[2]}</h4>

       

        <p>2월 17일 발행</p>

      </div>

     

     

      {

          modal == true ?  <Modal/> : null

        }

    </div>

  );

}

function Modal(){

  return(

<div className="Modal">

          <h4>제목</h4>

          <p>날짜</p>

          <p>상세내용</p>

        </div>

       

      )

      }

export default App;