reactjs로 동적인 UI 만들어보기

1. 개요

• 동적인 UI 만드는 STEP
  • HTML, CSS로 미리 디자인 완성
  • UI의 현재 상태를 state로 저장
  • state에 따라 UI를 어떻게 보여줄지 조건문 등으로 작성

2. 코드

import {useState} from 'react';

function App() {
    let [card, setCard] = useState(false);
    
    return(
        <div>
            <button onClick={()=>{
                if (card==true){
                    setCard(false)
                } else {
                    setCard(true)
                }}>
                    카드 컴포넌트 보여주기
                </button>
            {card == true ? <Card/> : ''}
        </div>
    )
}

function Card() {
    return(
    	<div>
        	카드컴포넌트
        </div>
    )
}

• 우선 Card 컴포넌트를 만들어주고
• 먼저 card라는 state를 만들고, 그 안에다가 false 값을 넣어줌
• 그 뒤에 App() 안에다가 누를때마다 Card 컴포넌트를 보여주고 숨겨주는 버튼을 조건문으로 만들어 줌
  • 이 버튼을 누를때마다 if문을 통해 card라는 state의 값을 false와 true 사이에서 전환시켜줌
• 그리고 삼항연산자를 넣어주는거임
  • 삼항연산자는 {card == true ? <Card/> : ''} 이부분을 의미함
  • {조건문 ? true일때 실행코드 : false일때 실행코드} 형태임
  • 우리가 작성한 삼항연산자는 card라는 state의 값이 true라면 <Card/>컴포넌트를 보여줘라.
  • 만약 false면 아무것도 보여주지마라(' ')라는 의미임
• 그러니까 우리는 방금 버튼을 누를때마다 컴포넌트가 나타났다가 사라지는 동적인 UI를 만들어본거임