클릭하면 동작하는 UI (모달창) 만드는 법

동적인 UI 만드는 step

1. html css로 미리 디자인완성
2. UI의 현재 상태를 state로 저장
3. state에 따라 UI가 어떻게 보일지 작성

<Modal>

=> 이것도 일종의 js 표현식이다. 그러므로 if 문 등 온갖곳에 다 들어갈 수 있다.

=> 그래서 if 안에 넣는다.

if 조건() {
  <Modal />
} else {
  <div>
  }

=> 요래 할 수 있겠다
=> 근데 쌩 if 를 쓰면 인식을 못함
=> 그래서

{
  if 조건() {
    <Modal />
  } else {
    <div>
    }
}

=> JSX로 중괄호를 만들어 넣는데, 이것도 안됨

=> 그래서 if 대신에 바로 삼항연산자, 삼항연산자는 중괄호 안에 쓸 수 있다.

      {
        1 < 3 ? console.log('맞아요') : console.log('들려요')
      }

=> 이렇게 쓰여지는 삼항연산자 조건 ? 맞 : 틀

      {
        1 < 3 
        ? console.log('맞아요') 
        : console.log('들려요')
      }

=> 주로 이렇게 if문처럼 표현을 한다.
=> 뭔가 promise 같기도

      {
        1 < 3 
        ? <Modal />
        : null
      }

=> null은 관습, 텅빈 HTML이라는 뜻

=> 그럼 어떤 조건을 이용해야할까?

=> 이것도 정해진게 있다.

=> state에 상태 같은것을 보관한다.
=> 내 예상과 맞네 Vue랑 동일해~

      <div className="list">
        <h3 onClick={ ()=>{ modal변경(modal=true) } }>{ 글제목[1] }</h3>
        <p>2월 17일 발행</p>
        <hr />
      </div>

=> 내가 한거
=> 맞다 근데 여기서 어차피 modal변경함수는 modal에 영향을 끼치는거니까

      <div className="list">
        <h3 onClick={ ()=>{ modal변경(true) } }>{ 글제목[1] }</h3>
        <p>2월 17일 발행</p>
        <hr />
      </div>

=> 이렇게만 작동시켜도 됨

=> 이제 true면 false로 false면 true로가 나올때구만

=> 역시 ㅋㅋㅋ 숙제로 냈다.

<button onClick={
        ()=> {
          if (modal === true) {
            modal변경(false)
          } else {modal변경(true)}
        }
      }>모달</button>

=> 내가 짠 코드 잘 돌아간다

=> 근데 ;;; 나도 뻔히 아는 방법인데 생각을 못함 내가 아주 원시적이였다면 이 정답은 일반적인 정답 ...

function App (){

  let [modal, modal변경] = useState(false);
  return (
    <div>

      <button onClick={ ()=>{ modal변경(!modal) } }> 열고닫는버튼 </button>
      { 
         modal === true 
         ? <Modal />
         : null
      }
    </div>
  )
}

=> ! ;;; 당연히 알았는데 생각을 못했다..... 바보 ..