컴포넌트의 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)
}
},[])