React : 2초 뒤에 사라지는 alert 만들기 (useEffect, 숏서킷평가)

2초 뒤에 사라지는 alert 만들기

풀이 - 바닐라 js 버전

import { useEffect } from "react"

function Detail(props){
  useEffect(()=>{
    setTimeout(()=>{ document.querySelector('.alert-warning').style.display = 'none' },2000)
  });
  return (
    <div className="container">
      <div className="alert alert-warning">
        2초 이내 이벤트로 이동하세요
      </div>
    </div> 
  )
}

---

풀이 2 - react 스타일 버전

import { useEffect, useState } from "react"

function Detail(props){
  let [alert, setAlert] = useState(true);
  useEffect(()=>{setTimeout(()=>{ setAlert(false) },2000)});
  return (
    <div className="container">
      {alert && <Alert />}
    </div> 
  )
}
function Alert(){
  return (
    <div className="alert alert-warning">
          2초 이내 이벤트로 이동하세요
    </div>
  )
}

---

풀이 3 - react useEffect & cleanup function 버전

import { useEffect, useState } from "react"

function Detail(props){
  let [alert, setAlert] = useState(true);
  useEffect(()=>{
    let timer = setTimeout(()=>{ setAlert(false) },2000)
    return ()=>{ clearTimeout(timer) }
  }, []);
  return (
    <div className="container">
      {alert && <Alert />}
    </div> 
  )
}
function Alert(){
  return (
    <div className="alert alert-warning">
          2초 이내 이벤트로 이동하세요
    </div>
  )
}

---

출처 : 코딩애플 https://codingapple.com/