useEffect()

BuDuDak·2021년 7월 26일

❓ useEffect() ?

useEffect 함수는 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 기능

useEffect(function,[])
// function 자리에 수행하고자 하는 작업, [] 에 검사하고자 하는 특정 값이 들어간다

예시)

useEffect(()=>{
	console.log('마운트 !')
},[])

useEffect 를 사용하면 컴포넌트가 마운트 됐을 때(처음 나타났을 때), 언마운트 됐을 때(사라졌을 때), 업데이트 될 때(특정 props가 바뀔때) 특정 작업 처리가 가능하다.

useEffect(()=>{
	console.log('마운트 될 떄만 실행')
},[])

컴포넌트가 화면에 처음 렌더링 될 때 한번만 실행되는 경우, 빈 배열을 넣는다.

useEffect(()=>{
	console.log('나타납니다')
  	return () => {
    	console.log('사라집니다')
    }
},[])

useEffect 에서 함수를 반환할 수 있는데, 이를 cleanup 함수라 부른다.
[] 란이 비어있는 경우 컴포넌트가 사라질때 호출된다.

만약 특정값이 업데이트 되기 직전, cleanup 함수를 실행하고 싶다면 [] 란에 검사하고 싶은 값을 넣어주면 된다.

useEffect(()=>{
	console.log(age)
  	console.log('age'가 업데이트 된다)
},[age])

특정값이 업데이트 될 때 실행하고 싶다면 [] 안에 검사하고 싶은 값을 넣어준다

이때, 업데이트 시에만 실행되는것이 아니라 마운트 시에도 실행된다.
업데이트 시에만 특정 함수 실행을 원한다면 조건을 붙여 사용하는것 또한 가능하다.

useEffect(()=>{
	if(isChange === true){
      		alert('바뀌었습니다')
    	}
},[isChange])

[]에 특정 값을 넣게 되면 컴포넌트가 처음 마운트 될 때, 지정값이 변경될 때, 언마운트 될 때, 값이 바뀌기 직전에 모두 호출 된다.