Coding Apple, React 강좌 내용 정리.13 - useEffect 훅(hook)

useEffect 훅

import React, {useState, useEffect } from "react"

 

컴포넌트가 mount, update 될때 특정코드 실행할 수 있다

useEffect(() => {
 console.log("11111");
});

ex) 3초뒤에 alert창을 안 보이게 하는 걸 만들고자 할 때

 

1.  UI 보이고/안보이고하는 상태를 state로 저장
    let [alert, alert변경] = useState(true);

 

2. 조건식으로 state가 true일때만 보여줌

{
    alert === true
    ? <div className="my-alert">
        <p>재고가 얼마 남지 않았습니다.</p>
      </div>
    : null
}

 

3. useEffect 내용 추가

setTimeout 함수를 이용해서, 2초뒤에 useState(false)를 실행한다.

useEffect(() => {
  let timer = setTimeout( ()=> {
    alert변경(false);
  }, 2000);
});

 

* 특정 state가 변경될때만 실행하려고 할때

useEffect(() => {
  let timer = setTimeout( ()=> {
    alert변경(false);

    // 타이머를 제거할 때, callback 함수 사용

    return ()=> { clearTimeout(timer) }
  }, 2000);
}, [alert] ); // alert이란 state가 변경될때만 useEffect 실행하라,

• 여러개 사용가능
• 내부에 return
• [조건]