Lifecycle

나쿠크·2023년 1월 7일
0

컴포넌트의 Lifecycle

  • mount : 페이지에 장착 됨
  • update : 업데이트 됨
  • unmount : 필요없을 때 제거됨

//컴포넌트에 갈고리 다는 법
class Detail2 extends React.Component{
	componentDidMount(){
    	~~~
    }
    componentDidUpdate(){
    	~~~
    }
    componentWillUnmount(){
    	~~~
    }
}

//요즘 작성법 
useEffect(()=>{
	~~~
   //사이드 이펙트 보관함
},[]) //[] 이부분을 추가해야 mount시에만 실행됨. 불필요한 작동을 막을 수 있음

useEffect(()=>{
	let a = setTimeout(()=>{},1000)
	
  	return () => {
    	//useEffect 동작전에 실행되는 return () => {}
      	//clean up function 이라고 부름 (싹 치운다는 뜻)
      	//clean up function은 mount시 실행안됨, unmount시 실행됨
    	clearTimeout(a)
    }
},[]) 

0개의 댓글