[React] useEffect의 Dependency

🔍 재랜더링 될때마다 useEffect 실행

useEffect(() => {
	setTimeout(() => console.log('Initial timeout!'), 1000);
}); 

🔍 처음 랜더링시 & defecdency array 내에 있는 value값이 변경될때 useEffect 실행

useEffect(() => {
	setTimeout(() => console.log('Initial timeout!'), 1000);
}, [count]);

🔍 useEffect 실행 전에 실행되는 return 코드값.

useEffect(() => {
	그 다음 실행됨 
	return ()=>{
    	여기있는게 먼저실행됨
    }
});

리액트 특성상 재랜더링이 잦다.
그렇기에 예상치않게 타이머가 수십,수백개가 실행될수도 있기에 보통 타이머 
작성시 return문 내에서 기존 타이머를 삭제하고 필요한 타이머만 실행되도록하여 
비효율을 방지한다.

useEffect(() => {

	let a = setTimeout(() => console.log('Initial timeout!'), 1000);
    console.log(2)
    
	return ()=>{
    	console.log(1)
    	clearTimeout(a);
    }
});

실제로  return문 내의 코드가 먼저 발생되는것을 볼수있다.