React : 동적인 UI 만들기 (현재 상태, 조건문 삼항연산자)

현재 상태 작성하기

// 전부 가능
let [Modal, setModal] = useState(0);
let [modal, setModal] = useState('닫힘');
let [modal, setModal] = useState(false);

state를 만들고 현재 UI의 상태정보를 저장한다. 현재 모달창의 상태만 표현할 수 있으면 어떤 자료든 상관없다.

---

삼항연산자

JSX 안에서는 if / else / for 등 문법을 사용할 수 없다. 그러나 중괄호 안에 삼항연산자는 사용할 수 있다.

// 조건식 ? 조건식 참일 때 실행할 코드 : 조건식 거짓일 때 실행할 코드 
3 > 1 ? console.log('맞음') : console.log('아님')

function App (){

  let [modal, setModal] = useState(false);
  return (
    <div className="app">
      (생략)
      {
        modal == true ? <Modal></Modal> : null
      }
    </div>
  )
}

---

클릭할 때마다 모달이 꺼지고 켜지게 만들기

function App() {
  let [modal, setModal] = useState(true);

  return (
    <div className="App">
      <div className="list">
        <button onClick={ ()=>{ modal == true ? setModal(false) : setModal(true) } > {글제목[0]} </button>
      	<button onClick={ ()=>{ setModal(!modal) } }> {글제목[0]} </button>
      </div>
      {
        modal == true ? <Modal></Modal> : null
      }
    </div>
  );
}

(둘다 할 수 있다.)
!modal의 경우, ! 우측 자료를 반대로 바꿔준다.

---

출처 : 코딩애플 https://codingapple.com/