동적 UI 만들기

동적 UI 만들기

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

2. UI 현재 상태를 state로 저장
3. state에 따라 UI가 어떻게 보일지 작성

예제

function app() {
<div className="App">
    <div className='list'>
          <h4>{title[2]} <span onClick={ () => { modal == true ? setModal(false) : setModal(true) }} >❤️</span> 0 개</h4>
          <p>2월 17일 발행</p>
    </div>
   	{
 		modal == true ? <Modal /> : ''
 	}
}
            

let [modal, setModal] = useState(false); // state저장

function Modal() {
    return (
        <div className="modal">
            <h4>제목</h4>
            <p>날짜</p>
            <p>상세내용</p>
        </div>
    )
}
// 컴포넌트 만들기

리액트 UI만드는 과정을 비유하면 스위치와 전등만드는거랑 비슷하다고 보면 됩니다.

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

2. 스위치랑 연결하고

3. 스위치를 on으로 놓으면 불이 켜지고 off로 놓으면 불이 꺼지도록
   만들어놓는 겁니다. 그리고 나중에 필요하면 스위치 조작만 하면 되는 것입니다
   스위치는 state, 전등은 <Modal>입니다.