useEffect

useEffect

컴포넌트가 mount 되었을 때 또는, 컴포넌트가 update(재랜더링) 될 때
특정 코드를 실행함

  useEffect(()=>{
    console.log(11111)
  },[state1,state2]);
    useEffect(()=>{
    console.log(11111)
  },[]);

useEffect 여러개 사용가능
위에서부터 순차적으로 작동

useEffect(,[state1,state2])
[]안에 특정 state를 적으면 그 state가 변경이 될 때만 실행이 된다.
즉 업데이트가 될 때 무한실행을 막을 수 있음 !

빈칸으로도 남길 수 있고, 여러개 적을 수 있다.
빈칸일 경우에는 한번 실행하고 끝남 !

  useEffect(()=>{
    let 타이머 = setTimeout(()=>{
      alert변경(false)
    },2000)
    return ()=>{
      clearTimeout(타이머)
    }
  },[]);

useEffect안에 있는 return은 페이지를 벗어날 때 종료하고 싶은 코드 작성

예를 들어, setTimeout() 같은 경우에는 실행이 됐다가 시간이 지나기전에 사용자가 다른페이지로 이동할 경우도 있다.
이와 같은 경우에 버그가 발생할 수도 있다.
그래서 return 다음에 setTimeout 을 종료시키는 clearTimeout을 작성하면 된다 .