[리액트] 일정시간후 레이아웃 사라지게하는법

웹페이지들을 보다보면 첫화면에서는 보이다가 몇초후 사라지는 창들이 있다. 특히 팝업창 같은 경우들이 많다.

그러면 그런 팝업창들은 어떻게 만들어줄까? 아래는 간단하게나마 적용해본 코드이다.

 

2초이내 구매신 할인의 html이 2초후에 사라지게된다.

 

import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import '../Detail.scss'
 
const Detail = (props) => {
 
  const [showalert, setShowalert] = useState(true);
 
  useEffect(()=>{
    setTimeout(()=>{
      setShowalert(false);
    }, 2000)
  })
 
  let {id} = useParams();
 
  return (
    <div className='detail'>
      {showalert && (
      <div className='alert alert-warning'>2초이내 구매시 할인</div>
      )}
        <div className='left'>
            <img src={props.dior[id].url}/>
        </div>
        <div className='right'>
            <h4>{props.dior[id].title}</h4>
            <p>{props.dior[id].content}</p>
            <p>₩{props.dior[id].price}</p>
            <button>빠른구매</button>
        </div>
    </div>
  )
}
 
export default Detail