UseEffect

▶ useEffect (코드가 언제 실행될지를 정할 수 있음)

import {useEffect} from 'react'

function Hello(){
	useEffect(()=>{
    	console.log('hi');
    },[])
}


function Hello2(){
	function effectFn(){
    	console.log('hi2');
    }
	useEffect(effectFn,[]); //같은 의미
    return <h1>Hello</h1>
}

 

• 2가지 argument 존재
  • 우리가 실행시키고 싶은 함수
  • dependency
    •    해당 dependency가 변화할때마다 우리가 실행시키고 싶은 함수를 실행한다는 의미
    •    []비어있으면 코드가 한번만 실행된다는 것을 의미)

 

▶ Cleanup (uesEffect에서 실행하고 싶은 함수가 사라질 경우 실행시키는 함수)

function Hello(){
	useEffect(()=>{
    	console.log('hi');
        return () => console.log('destroyed');
    },[])
}


function Hello2(){
	function byeFn(){
    	console.log('destroyed');
    }
	function effectFn(){
    	console.log('hi2');
        return byeFn;
    }
	useEffect(effectFn,[]); //같은 의미
    return <h1>Hello</h1>
}

• 해당 코드에서 return 뒤에 오는 함수가 cleanup함수임
•  Usage
  •  component가 없어질 때 어떤 분석 결과를 보내고 싶을 경우 사용 가능
  • 분석 API