[리액트] useEffect 4가지 사용법 간단 정리

mount

1. 컴포넌트가 처음 렌더링될때

useEffect(()=> {
  console.log("컴포넌트가 처음으로 브라우저에 나타날때 호출")
}, [])

 

mount + update

2. 컴포넌트가 처음 렌더링될때 & 컴포넌트가 다시 렌더링이 될때

useEffect(()=> {
  console.log("컴포넌트의 초기렌더링  & 컴포넌트의 리렌더링시 호출")
})

 

mount + update

3. 컴포넌트가 처음 렌더링될때 & 특정 props, states가 업데이트되서 컴포넌트가 다시 렌더링이 될때

useEffect(()=> {
  console.log("컴포넌트의 초기렌더링 & 배열안 데이터가 업데이트되면서 컴포넌트의 리렌더링시 호출")
},[데이터])

 

unmount

4. 컴포넌트가 사라질 때 & 사라기지 직전에

 useEffect(()=> {
  return console.log("컴포넌트가 사라지기전 호출")
})