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

[동적인 UI만드는 3step]

 

1.html css로 미리 디자인하기

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

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

let [state이름, state변경함수(주로 set~으로 시작)] = useState(UI상태,false는 닫힘);

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

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

중괄호{} 안에 if문을 쓸 수 없다.

삼항연산자를 사용하면 됨.

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

 

 

[제목 클릭시 모달창 띄우기]

 

클릭시 state만 조절하면 됨

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

 

[제목 한번 더 클릭시 모달창 닫기]

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