[React] 동적인 UI 만들기 - 모달창 + 삼항연산자

동적인 UI 만드는 step

 

1. <Map>컴포넌트에 html css로 미리 디자인 완성

<button>지도 열기</button>
 

2. UI의 현재 상태를 state로 저장 (닫혀있을때 false 열릴때 true로 할 것)

  let [map,setMap] = useState(false);
 

 <button onClick={()=>{
  setMap(!map);
}}>지도 열기</button>

3. state에 따라 UI가 어떻게 보일지 작성-삼항연산자 조건문으로

      {
        map==true? <Map/> : null
      }

💨 state가 스위치, 삼항연산자가 기계

 

 

삼항연산자

 

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

 

{
    1==1 ? '맞음' : '아님'
}

1==1 조건이 참이면 '맞음' 거짓이면 '아님'

 

&& 사용해서 삼항연산자 축약하기 (물음표 대신 &&, false의 null 값 생략)

 

만약 이 변수가 참이면 블라블라 코드 실행, 거짓이면 null 실행 이라는 조건문 주고싶다면

&&연산자로 코드 축약할 수 있음

 

function Component() {
  return (
    <div>
      {
        1 === 1
        ? <p>참이면 보여줄 HTML</p>
        : null
      }
    </div>
  )
} 
 
function Component() {
  return (
    <div>
      { 1 === 1 && <p>참이면 보여줄 HTML</p> }
    </div>
  )
}

 

 

 

 

Q. setMap 함수에 느낌표가 뭐세요

느낌표는 우측자료를 반대로 바꿔줌

!true는 출력해보면 false

!false는 출력해보면 true