[React] React 환경에서 동적인 UI 만들기 (삼항 연산자)

동적인 UI 만드는 3 step

1. html CSS로 미리 디자인을 완성한다.
2. UI의 현재 상태를 state로 저장한다.
3. state에 따라 UI가 어떻게 보일지 조건문 등으로 작성한다.

function App () {

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

  return (
    <div>
      <button onClick={()=>{ setModal(!modal) }}>모달창 여닫기</button>
      {
        modal === true
        ? <Modal />
        : null
      }
    </div>
  )
}

function Modal () {
  return (
    <div>
      나는 모달창
    </div>
  )
}

JSX에서 조건문 쓰는 법

JSX 안에서는 if else 문법을 바로 사용할 수 없다. 때문에 삼항연산자를 써야한다.
삼항연산자는 JSX 중괄호 안에서 사용 가능하다.

조건식 ? 조건이 참일 때 : 조건이 거짓일 때;

let state =  3 > 1 ? "맞음" : "아님";
console.log(state); 	// 맞음