[React] 동적 UI 만들기(모달창 만들기)

기존 자바스크립트 방식과 달리 리액트에서는 데이터의 변동이 프론트 단에서 서버와의 통신 없이도

즉각적인 리빌딩 가능하다.

 

리액트에서 UI 만드는 단계

1. html css로 미리 디자인 완성

 1) html

function Modal(){
  return (
    <div className="modal">
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

 2) css

.modal{
  margin-top:20px;
  padding:20px;
  background:#eee;
  text-align:left;
}

 

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

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

 

3. state에 따라 UI 조작

<div className="list">
    <h4 onClick={()=>{setModal(!modal)}}>{글제목[2]}</h4>
    <p>2월 17일 발행</p>
</div>

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

onClick 속성이 작성된 h4 태그를 클릭하면 modal state의 상태가 변경되도록 setState 함수가 동작한다.

누를 때마다 modal 속성이 true에서 false로, false에서 true로 변하도록 작성되어 있다.

이 때, 앞에서 정의한 modal state의 상태가 true면 Component Modal을 호출하고

false면 Component 모달을 호출하지 않는다.

 

결과

 

modal = false 인 경우

modal = true 인 경우

 

 

출처 : 코딩애플_React 기초부터 쇼핑몰 프로젝트까지!

https://codingapple.com/course/react-basic/

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌