라이프 사이클? 훅?

라이프 사이클 (Life Cycle)

컴포넌트의

• 생성(mount)
• 업데이트
• 소멸(unmount)

훅 (Hook)

컴포넌트의 라이프 사이클(mount, update, unmount) 중간에 훅(갈고리)을 걸어서 실행할 명령

useEffect() case 1

useEffect(() => {
	//function1
  return ({
  	//function2
  })
})

useEffcet()를 사용할때는
import {useEffect} from 'react' 를 상단에 입력해준다.

useEffect()는 컴포넌트가 마운트 될때, 렌더링이 일어날때, 컴포턴트가 언마운트 될때마다 실행되는 훅(hook)이다.

function1은 마운트 될때, 업데이트 될때 실행된다.
function2는 언마운트 될때 실행된다.

useEffect() case 2

useEffect(() => {
	//function3
  return ({
  	//function4
  })
},[state])

case2 코드는 case1코드와 거의 흡사하다.
다만 저 배열같이 생긴곳에 state라는 녀석이 들어가 있다.

저 말인즉슨, function3 은 마운트될때, state가 변경될때마다 실행된다.

useEffect() case3

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초뒤에 실행되는 함수가 들어가고
언마운트 될때 타이머를 제거해준다.