[React] CH07. 클릭하면 동작하는 UI(모달창) 만드는 법

1. JSX 중간에 자바스크립트 코드 넣기

• { 자바 스크립트 코드 }

---

2. HTML UI를 조건에 따라 보여주기

• 삼항 연산자
  - if는 {}안에 쓸 수 없음 → {}안에서 if문 같은 역할이 가능한 것 ⇒ 삼항 연산자
  - 조건식 ? 참 일때 실행할 코드 : 거짓일 때 실행할 코드

{
        1 < 3 
        ? <Modal></Modal>
        : null	// 텅빈 HTML
}

※ 참고
텅빈 HTML 의미 ⇒ null 자료형

---

3. React 에서 클릭시 등장하는 UI 만드는 법

• 리액트에서 UI 보임/안보임 정보 → state로 저장 (true/false 자료셩 사용)
• if문 이용해 state가 true일 때, UI 보여줌

function App (){
  // modal 창 보임/안보임 스위치
  // 사이트 첫 로드시 모달창 안보이며, 제목 누르면 모달창 보임
  let [modal, modal변경] = useState(false);
  
  return (
    <div>
      HTML 잔뜩있는 곳
      <button onClick={ ()=>{ modal변경(true) } }> 열기 </button>
      { 
         modal === true 
         ? <Modal />
         : null
      }
    </div>
  )
}

※ 참고
: 문자, 숫자, true/false ⇒ 직접 수정 가능
: array, object와 같은 reference 자료형 ⇒ state 변경시 복사본 만들어서 수정해야 함

---

[ 참고 ]

 

https://online.codingapple.com/course/react-basic/

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌