[react] 리액트 환경에서 동적인 UI 만드는 법

리액트에서 동적인 UI 만드는 step

1. html css 로 미리 UI 디자인을 다 해놓고

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

3. state 에 따라서 UI 가 어떻게 보일지 조건문 등으로 작성 

 

글 제목을 누르면 modal 창 등장하도록 설정 

 

1. html css 로 미리 UI 디자인 해놓기 

 

 

 

이제 글 제목을 누르면 이 창이 뜨도록 할 것이다.

 

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

 

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

 

 

 

영어로 작명 시 state 변경 함수는 set을 앞에 붙이는게 관습

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

 

 

<div className = "list">

        <h4 onClick = {() => {

          if(modal){

            setModal(false)

          }else{

            setModal(true)

          }

          }}>{title[0]}<span onClick = {() => { addLike(like = like + 1) }}>👍</span>{like}</h4>

        <p>12월 9일 발행</p>

      </div>

 

위와 같이 onClick 함수 작성 

 

{

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

      }

 

그리고 보여질 위치에 다음과 같이 작성

조건문은 if/else 문법 쓰면 되는데 JSX 안에서는 if / else 를 사용할 수 없음 

따라서 대신 삼항연산자를 사용함