React 기초(2)-Component Modal

Component

반복해서 출현하는 HTML or 긴HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 방법.

1. function을 이용해서 함수를 하나 만들어준다. ( function App(){}내부에 만들면 x)

2. 그함수 return () 에 축약을 원하는 html을 담는다.

3.원하는 곳에서 <함수명></함수명> or <함수명/>을 사용하면 축약한 html이 나옴!

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

동적인 UI 만들기

동적인 UI란 유저가 조작시 형태가 바뀌는 모달창 탭 서브메뉴 툴팁 경고문 등 그런 UI들을 의미합니다. 

 

 응용1)글제목을 누르면 모달창을 띄우게 하기

-JSX { } 안에 if문은 쓸 수 없습니다. if 대신에 삼항연산자를 쓸 수 있습니다.

-리액트에선 UI를 만들 때 state데이터를 이용합니다.
 state로 UI 보임/ 안보임 스위치를 넣음

 

function App (){
 
  let [modal, setModal] = useState(false);
  return (
    <div>
      (생략)
      <button onClick={ ()=>{ setModal(true) } }> {글제목[0]} </button>
      { 
         modal == true ? <Modal></Modal> : null
      }
    </div>
  )
}

=>글제목을 누르면 modal 이라는 state를 true로 바꿔주겠다. 그리고 modal 이true이면 모탈창을 열어주고 아니면 null을 호출하겠다.

 

응용2)응용 1에서 글제목을 한번더 누르면 모달창이 닫히게 하기

지금 state가 true면 setModal(false)

지금 state가 false면 setModal(true)가 되도록 하면 되겠구나!

function App (){
 
  let [modal, setModal] = useState(false);
  return (
    <div>
      (생략)
      <button onClick={ ()=>{ setModal(!modal) } }> {글제목[0]} </button>
      { 
         modal == true ? <Modal></Modal> : null
      }
    </div>
  )

=> ! 를 사용해서 modal의 값을 반대로 바꿔준다

!true를 출력해보면 false

!false를 출력하면 true