컴포넌트의
컴포넌트의 라이프 사이클(mount, update, unmount) 중간에 훅(갈고리)을 걸어서 실행할 명령
useEffect(() => {
//function1
return ({
//function2
})
})
useEffcet()
를 사용할때는
import {useEffect} from 'react'
를 상단에 입력해준다.
useEffect()는 컴포넌트가 마운트 될때, 렌더링이 일어날때, 컴포턴트가 언마운트 될때마다 실행되는 훅(hook)이다.
function1은 마운트 될때, 업데이트 될때 실행된다.
function2는 언마운트 될때 실행된다.
useEffect(() => {
//function3
return ({
//function4
})
},[state])
case2 코드는 case1코드와 거의 흡사하다.
다만 저 배열같이 생긴곳에 state라는 녀석이 들어가 있다.
저 말인즉슨, function3 은 마운트될때, state가 변경될때마다 실행된다.
useEffect(() => {
//function5
return ({
})
},[])
case3의 경우에는 []부분이 비어있기 때문에
마운트 될때만 실행된다.
class foo extends React.component{
componentDidmount(){
//function1
}
componentDidUnmount(){
//function2
}
}
function1은 마운트 될때
function2는 언마운트 될때
실행되는 훅이다
useEffect(()=>{
let myTimer = setTime(()=>{
//function1
},1000)
return ()=> {clearTimeOut(myTimer)}
}[])
컴포넌트가 마운트 될때 myTimer
에 1초뒤에 실행되는 함수가 들어가고
언마운트 될때 타이머를 제거해준다.