리액트 React : 리액트 환경에서 동적인 UI 만드는 법

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

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

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

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

 

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

function App (){
  return (
    <div>
      (생략)
      <Modal></Modal>
    </div>
  )
}

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

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

 

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

state 하나 만들고

거기에 현재 UI의 상태정보를 저장합니다

예를 들어, 0과 1, true/false 등을 활용합니다.

 

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

 

모달창은 열림/닫힘 이 두개 상태밖에 없기 때문에 그거 2종류만 표현할 수 있는 자료형이면 됩니다.

 

 

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

function App (){

  let [modal, setModal] = useState(false);
  return (
    저 state가 true면 <Modal></Modal>
    false면 아무것도 보여주지마세요
  )
}

 

if문을 활용하여 state의 상태가 true일 때, <Modal> 를 보여주고 false면 아무것도 보여주시 말아달라는 코드를 작성해주면 됩니다.

 

JSX에서 조건문 쓰는 법

조건문은 if / else 문법을 쓰면 되는데 

JSX 안에서는 if else 문법을 바로 사용할 수 없습니다.

하지만 if 문법 대신 삼항연산자라는건 JSX 중괄호 안에서 사용가능합니다.

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

 

이렇게 if문 대신 쓸 수 있는 문법이 삼항연산자입니다. 

 

3 > 1 ? console.log('맞음') : console.log('아님') 

 

예를 들어 이렇게 쓰면 3 > 1 이게 참이기 때문에 '맞음'이 출력됩니다. 

 

이렇게 삼항연산자를 사용하여 state의 상태에 따라 모달창을 보여주세요 라는 코드를 작성해주면

function App (){

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

 

글제목 누르면 modal이라는 state를 true로 바꿔달라고 코드짰습니다.

 

이를 활용하여 버튼을 누를 때마다 스위치처럼 state의 상태를 변경해주세요를 코드를 작성하연 이렇게 됩니다.

 

function App (){

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