리액트 동적 ui 만들기 모달창만들기

리액트 동적 ui 만들기

 

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

2. ui 현재 상태를 state로 저장

3. state에 따라 ui가 어떻게 보일지 작성 [조건문]

 

 

 

html css로 미리 디자인 완성

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



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

// 컴포넌트 작성 ( html / css 작성 )

 

 

ui 현재 상태를 state로 저장

  let [modal, setModal] = useState(false);
  
  // 현재상태를 state에 보관. 
  // false,true가능 , 숫자가능

 

 

 

state에 따라 ui가 어떻게 보일지 작성 [조건문]

 

조건문 작성방식

 

조건문 ? 참일때 실행코드 : 거짓일때 실행 코드

 

1 == 1 ? <div>참<di> : null

// 이방식은 1과 1이 같을때 참이 나오고, 다를땐 null값으로 나오지 않는다는 의미
// 여기서 참의 부분에는 <Modal/> 과 같은 컴포넌트가 나오면 좋다.

 

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