210713 useEffect()

Lifecycle & Hook

컴포넌트의 lifecycle: 컴포넌트의 등장(생성) -업데이트(재렌더링)->퇴장(삭제)
이러한 컴포넌트의 lifecycle안에 hook을 걸 수 있다.

생성 전에 무언가를 해달라고 하거나, 삭제 전에 무언가를 해달라고
컴포넌트의 lifecycle 중간에 명령을 줄 수 있다는 뜻!

원래는 클래스로 만든 컴포넌트들만 사용가능
componentDidMount() 생겨날 때
componentWillUnmount() 삭제할 때

지금은 useEffect 훅을 사용할 수 있다
컴포넌트가 mount 되었을 때, update 되었을 때 모두 특정 코드를 실행할 수 있음.

useEffect(()=>{
 console.log(1111)
});

(mount 혹은 update되었을 때 콘솔에 1111을 출력해라)

---

1. detail 페이지 방문 후 alert 창이 2초 후에 사라지게 하기

setTimeout(()=>{ }, 2000)

UI를 만들 때 UI의 상태를 state로 저장해두고 true일 때만 UI를 보여주도록 했다는 것을 기억하자!!

let [alert, setAlert] = useState(true);    //alert창의 상태를 저장
...

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

alert의 상태가 true이면 my-alert div를 보여주는 코드가 완성되었다.

이제 2초 후에 alert의 상태를 false로 바꿔주면 2초 후에 div가 사라질 것이다.

useEffect(()=>{
  setTimeout(()=>{ setAlert(false) }, 2000);
});

그런데 useEffect()는 컴포넌트가 업데이트 될 때도 실행되기 때문에 의도하지 않은 버그가 생길 수 있음!

• 특정 state가 변경될 때만 실행해달라고 조건을 넣을 수 있음
  (alert가 변경될 때만 실행해 달라는 코드)

useEffect(()=>{
 setTimeout(()=>{ setAlert(false) }, 2000);
}, [alert]);

[]안에 아무것도 없으면 컴포넌트 로드때만 딱 한 번 실행함.

✨보통 setTimeout()은 변수에 저장해서 사용함.

2. 컴포넌트가 사라질 때 코드를 실행시키기
   useEffect 함수 안에 return function 함수명(){ 실행할코드 }
   컴포넌트가 사라질 때 {} 안의 코드가 실행된다!

setTimeout()을 사용했다면 타이머를 해제해주자

useEffect(()=>{
  let timer= setTimeout(()=>{ setAlert(false) }, 2000);
 return ()=>{ clearTimeout(timer) }
}, [alert]);

useEffect는 여러 번 사용해도 상관 없음. 여러 번 나온다면 위에서부터 실행