React : 동적 UI 만들기

# 제목 눌렀을 때 Modal 창 띄우고 다시 눌렀을 때 Modal 창을 닫는 방법

 

여기서 제목 글자를 클릭했을 때 아래의 상세보기 창이 나오고 안나오고를 반복하고 싶을때는 state 를 사용 하면 된다.

 

 

 

 

 

 

Blog.js

import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
 
function Blog() {
  let [modal, setModal] = useState(false);
 
  return (
    <div className="App">
      <div className='list'>
        <h3>제목</h3>
        <p>11월 26일 발행</p>
      </div>
      {
        modal == true ? <Modal></Modal> : null
      }
    </div>
  );
}
 
function Modal() {
  return (
    <>
      <div className="modal">
        <h4>제목</h4>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
    </>
  )
}
 
export default Blog;
 

modal 이라는 state 를 선언해주고, 초기 값을 false 로 두어 처음 로딩 시에는 Modal 창이 안보이게 해준다.

 

 

 

그리고 14~16 째 줄과 같이 { } 안에 삼항연산자로 modal 이 true 이면 Modal 컴포넌트를 보이게 하고, false 이면 null 을 주고 아무것도 보이지 않게 한다.

(react 에는 {} 안에 if 문 사용 불가)

<h3  onClick= {() => { 
          setModal(true);
          }}>
제목</h3>

h3 태그에 Click 이벤트를 줘서 modal 을 true 로 바꿔주면, Modal 창이 보이게 된다.

 

 

하지만 이렇게만 해주면 보이게만 하고 다시 사라지게 하는건 할 수 없는데 ,,,

 

 

 

 

 

 

# setModal(!modal)

<h3  onClick= {() => { 
          setModal(!modal);
          }}>
제목
</h3>

이렇게 해주면!!!!  Modal 이 사라졌다 나타났다 한다.

현재 modal 변수가 true 상태이면 false 로 바꿔주고, modal 변수가 false 상태이면 true 로 바꿔주는 코드이다.

(오...)

 

 

마치 스위치 ON/OFF 기능처럼 state 를 사용하는 것이다.