Life cycle 함수

✍️ class component 의 life cycle 함수의 종류가 여럿 있지만 그 중에서 자주 사용하는 것만 정리하였다. 함수가 실행되는 시점과, 동일한 내용의 hooks 의 useEffect 도 같이 정리 하였다.

componentDidMount

componentDidMount() {
    console.log('componentDidMount');
}

• component render 후 실행 (생성될 때)
• 처음 한번만 실행함.
• DOM 접근 가능
• ajax 요청, setTimeout, setInterval 실행

componentDidUpdate

componentDidUpdate(prevProps, prevState) {
    console.log('componentDidUpdate');
}

• props or state 업데이트 이후, render 완료 후 실행 (업데이트 될 떄)
• DOM 접근 가능
• 바뀌기 이전의 props와 state의 값을 인자로 받아 옴.

compoenentWillUnmount

componentWillUnmount() {
    console.log('componentWillUnmount');
}

• component 제거 되기 전에 실행 (제거 할 때)
• 이벤트 리스너 제거 실행

useEffect

함수 componeent 사용 시, hook인 useEffect로 componentDidMount, componentDidUpdate, compoenentWillUnmount를 더 간결하게 나타낼 수 있다.

1. componentDidMount

   • deps 위치(함수 뒤 배열)에 빈 배열 적용

   useEffect(()=>{
   	console.log('componentDidMount')
   },[])

2. componentDidUpdate

   • update를 감지할 props 나 state는 deps 위치에 넣는다.

   useEffect(()=>{
   	console.log(`나는${fruit}을 좋아해!`);
   },[fruit])

3. compoenentWillUnmount

   • return 뒤에 함수를 넣음.

   useEffect(()=>{
   	return(
   		console.log('componentWillUnmount')
   	)	
   },[]) 

⚠️ deps배열을 넣지 않으면 rerender 될 때마다 useEffect 함수가 동작한다.

useEffect(()=>{
	console.log('rerender 시 계속 실행!')
})

참고 문헌

• https://www.zerocho.com/category/React/post/579b5ec26958781500ed9955
• https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
• https://xiubindev.tistory.com/100