useEffect & Lifecycle

lifecycle 도형

class 에서의 생명 주기

📗 마운트
constructor
getDerivedStateFromProps
render
componentDidMount

📗 update
getDerivedStateFromProps
shouldComponentUpdate
render
getSnapshotBeforeUpdate
componentDidUpdate

📗unmount
componentWillUnmount

Hook에서의 생명주기 - useEffect

💡 componentDidMount, componentDidUpdate, componentWillUnmount, getDerivedStateFromProps를 모두 실행
( 컴포넌트가 처음 실행, 컴포넌트 업데이트 후, 컴포넌트가 언마운트 되기 전 모두 실행)

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

📗mount
컴포넌트 mount시에만 실행

  useEffect(()=>{
	console.log("check");  
  }, []);

📗update
state가 업데이트 될때만 실행

  useEffect(()=>{
	console.log("check");  
  },[state])

📗mount
unmount이전 / update직전에 어떠한 작업을 수행

  useEffect(()=>{
	console.log("check");  
    return(() => func());//clean up 함수
  })

참고

React - Effect Hook ( Clean-up )
[React] useEffect와 hook 생명주기(life-cycle)
React useEffect / clean-up 함수 알아보기
25. LifeCycle Method