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

동적인 UI 만드는 방법

1. HTML, CSS로 미리 디자인
2. UI의 현재 상태를 state로 저장
3. state에 따라 UI가 어떻게 보일지 작성

 

자바스크립트 vs 리액트

• 자바스크립트에선 버튼을 누르면 모달창 HTML을 직접 건드림
• 리액트에선 버튼을 누르면 모달창의 state만 건드림

 

 

 

1. HTML, CSS로 미리 디자인

.list {
  padding-left: 20px;
  text-align: left;
  border-bottom: 1px solid grey;
}
.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>{ title[0] }</h4>
	<h4 onClick={ () => { modal == false ? setModal(true) : setModal(false) }}>{ title[0] }</h4>
</div>

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

• * if 사용불가 - 삼항연산자 사용
• 조건식 ? 참일 때 실행할 코드 : 거짓일 떄 실행할 코드