[React] IF문 삼항연사자/ 클릭하면 동작하는 UI 창 만들기

JSX에서 IF문 사용하기

JSX에서 자바스크립트를 사용하려면 {} 중괄호 안에 넣으면 되는데

IF문이 들어올 수 없다. 그래서 삼항 연사자로 사용한다.

 

{
	1 < 3 // 조건식
	? console.log('맞아요')  //참일 때 실행할 코드
	: console.log('틀러요')  //거짓일 때 실행할 코드
}

 

클릭하면 등장하는 모달창 만들기

1. UI가 보이는/ 보이지 않는 상태정보를 state에 저장한다.(보통 true/false 자료형으로)

let [modal, modal변경] = useState(false);

모달창을 켜고 닫는 스위치이다.

 

2 if문을 이용해 state가 true일 때 UI를 보여준다.

{
  modal === true
  ? <modal/>
  : null //텅빈 HTML이라는 뜻
}

state가 true일 때 모달 컴포넌트가 나올 수 있도록 설정한다.

 

3 함수 설정

<h3 onClick={ () => {modal변경(true)}}> {글제목[2]} </h3>

클릭했을 때 state 변경함수를 true로 설정해준다.

 

버튼을 클릭하면 모달창이 열렸다 닫혔다 하기

	<button onClick={() => {modal변경(!modal)}}>모달창</button>

      {
        modal === true
        ? <Modal></Modal>
        : null
      }

!를 붙여주면 된다.

!true는 false로, !false는 true로 바꿔주기 때문에

state에 '!'를 붙이면 true일 때는 false로, false일 때는 true로 바꿔준다.

 

예시 전체

/* eslint-disable */

import React, { useState } from 'react';
import './App.css';


function App() {
  let [글제목, 글제목변경] = useState(['남자 코트 추천', '부산 우동맛집', '파이썬 독학']);
  let [따봉, 따봉변경] = useState(0);

  let [modal, modal변경] = useState(false); 

  let posts = '부산 고기 맛집';

  function 제목바꾸기(){
    var newArray = [...글제목];
    newArray[0] = '여자코트 추천';
    글제목변경(newArray);
  }
  

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <button onClick={제목바꾸기}>버튼</button>
      <div className="list">
        <h3> {글제목[0]} <span onClick={()=>{따봉변경(따봉 + 1)}}>👍</span> {따봉} </h3>
        <p> 2월 17일 발행</p>
        <hr/>
      </div>
      <div className="list">
        <h3> {글제목[1]} </h3>
        <p> 2월 18일 발행</p>
        <hr/>
      </div>
      <div className="list">
        <h3 onClick={()=>{modal변경(true)}}> {글제목[2]} </h3>
        <p> 2월 19일 발행</p>
        <hr/>
      </div>

      {
        modal === true
        ? <Modal/>
        : null
      }

    </div>
  );
}

  
//컴포넌트 만들기
function Modal(){
  return(
    <div className="modal">
        <h2>제목</h2>
        <p>날씨</p>
        <p>상세내용</p>
      </div>
  )
}



export default App;