useEffect

html 렌더링 이루에 동작하기 때문에
오래 걸리는 작업을 넣어볼 수 있다

Lifecycle에서 mount update unmount 과정에 실행 가능하다.

 

- cleanup function

: useEffect 동작 전에 특정 코드를 실행하는 방법

=> useEffect를 통해 생성되는 코드가 있다면, 의존성 배열때문에 그게 계속 추가될 수 있다. 새로운 것은 추가하되 이전 것은 삭제하고 싶은 경우 등에 사용될 수 있다.

useEffect(()=>{ 
  // 2번째로 실행
  return ()=>{
    // 1번째로 실행
  }
}, [state변수])

각 useEffect 코드의 차이점

// (1)
useEffect(()=>{ ... })

// (2)
useEffect(()=>{ ... }, [])

// (3)
useEffect(()=>{ 
  return ()=>{
    ...
  }
})

// (4)
useEffect(()=>{ 
  return ()=>{
    ...
  }
}, [])

(1)은 재렌더링 될때마다 실행. 의존성 배열이 없다

(2)는 mount시 1회만 실행

(3)은 useEffect를 실행하기 전에 return 안쪽 코드를 실행하고 싶을 때

(4)는 unmount시 1회 실행