2023-05-13

어제 숙제의 또 다른 방식

let [tempEvent, setTempEvent] = useState(true);

  useEffect(()=>{
    setTimeout( ()=>{ setTempEvent(false) }, 2000)
  }, [])
  
   <div className="container">
    {
        tempEvent == true 
        ? <EventBox>2초 안에 결제하면 무료ㅋ</EventBox> : null
      }
   </div>

이렇게도 가능하구나
여기서 다시 복기!
동적인 UI 만드는 STEP!
1. html css로 미리 UI 디자인을 다 해놓고 = 전등을 예쁘게 달아놓고
2. UI의 현재 상태를 state에 저장해두고 = 스위치랑 연결하고
3. state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성 = 스위치를 on으로 놓으면 불이 켜지고 off로 놓으면 불이 꺼지도록