리액트에서 useEffect 사용하는 법 (창 사라지게 만들기)

컴포넌트가 생성되거나 업데이트되거나 삭제될때,

컴포넌트에 어떤 효과를 주는 함수 useEffect()를 배워볼 거예요

use어쩌구로 시작하기 때문에 이걸 lifecycle hook 이라고도 부릅니다

 

요즘 React에서 Lifecycle hook 쓰는 법

import {useState, useEffect} from 'react';

function Detail(){

  useEffect(()=>{
    //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨
    console.log('안녕')
  });
  
  return (생략)
}

상단에 useEffect import 해오고, 

useEffect 에 콜백함수(파라미터를 함수로 받는것)를 적어주면, {} 안에 있는 토드를

컴포넌트 로드(생성) 또는 업데이트시 실행합니다

 

 

useEffect()를 어디다 쓰냐구요?

 

html 이 렌더링 된 후 코드를 실행하고 싶을때(비동기적으로)

useEffect() 를 씁니다!

 

이번엔

Detail 페이지 후 3초 후에 박스가 사라지게 해보고 싶습니다.

동적인 UI 같은거라 그런거 만들 땐 

1. UI 상태를 저장할 state 만들고

2. state에 따라서 UI가 어떻게 보일지 작성 (삼항연산자)

 

클래스네임 hidden 을 떼엇다 붙였다 하는 식으로도 할 수 있겠지만

이번에는 삼항연산자를 사용해서 html을 조건적으로 보여주는 형태로 만들어볼게요

 

 

return(
        <div className="container">
          {
          alert === true ?  
          <div className="alert alert-warning" style={{height:'100px' , backgroundColor : '#FBFFB1'}}>
          3초이내 구매시 할인쿠폰!</div> 
          : null
          }

먼저 state가 true 일때 보여주고, false 일때 숨기는 조건문을 만들어볼게요.

딱 페이지가 처음 렌더링되었을때는 true 상태라 할인쿠폰 창이 보입니다

그러다가 2초뒤에 사라지게 하고 싶으니 setTimeout()를 useEffect함수안에 넣어서 사용해보죠!

 

 

function Detail(props){
  //생략
  let [alert, setAlert] = useState(true)

  useEffect(()=>{
    //여기적은 코드는 컴포넌트 로드& 업데이트시 코드 실행
    setTimeout(()=>{
      setAlert(false)
    },3000)
  })

setTimeout() 함수 안에는 setAlert라는 state 변경함수를 이용해서 state를 false 로 교체해줘요.

페이지 렌더링 후 딱, 3000ms(3초) 뒤에 state가 변경되면서 쿠폰창이 사라집니다

 

 

이랫다가 3초뒤에 사라짐!