useEffect - React Hooks

useEffect의 두 가지 형태

첫 번째

• 컴포넌트가 렌더링 될 때마다 실행

useEffect(() => {
	//작업...
});

두 번째

• 화면에 첫 렌더링 될 때 실행
• 배열 인자의 값(value)이 변화할 때마다 실행

useEffect(() => {
	//작업...
},[value]);

// [] 두번째 인자가 빈 배열일 때에는 화면에 첫 렌더링 될때 만 실행한다.

useEffect의 Clean Up

useEffect(() => {
	const timer = setInterval(() => {
    	console.log('타이머 돌아가는 중...');
    }, 1000);
    
    return () => {
    	clearInterval(timer);
        console.log('타이머가 종료되었습니다.');
    };
}, []);

• 한번 실행되면 백그라운드에서 계속 실행되는 함수가 있다면 Clean Up으로 정리해 줄 필요가 있습니다.
• Clean Up을 적절히 사용하면, 메모리 누수가 발생하지 않도록 정리할 수 있습니다.