useEffect counter로 작동 순서 정리

 

 

import { useEffect, useState } from 'react';

const Counter = () => {
	const [count, setCount] = useState<number>(0);

	const handleOnClick = () => {
		setCount(prev => prev + 1);
	};

	console.log('useEffect 전');

	useEffect(() => {
		console.log('실행');
		return () => console.log('-------cleanUP--------');
	}, [count]);

	console.log('useEffect 다음');

	return (
		<div>
			<div>{count}</div>
			<button onClick={handleOnClick}> button </button>
		</div>
	);
};

export default Counter;

 

 

 

 

useEffect 는 컴포넌트 렌더링이 끝난 다음에 실행된다

 

useEffect 인자성 배열에 [count]를 넣었으니 count 값이 바뀔 때마다 useEffect 안의 함수가 발동되는데

 

return 리렌더링 되면서 "실행" 전에 발동한다

 

 

 

👆 처음 마운트 되었을 때의 콘솔

 

 

 

 

 

👆 count 값 변경으로 리렌더링 일어난 후의 콘솔

 

 

 

 

 

 

useEffect 는 가장 마지막에 읽는 것은 똑같으나 return 문의 cleanup 함수를 먼저 읽고 함수를 실행한다.

 

이러한 순서는 마운트 시점에 이벤트 리스너를 추가하고 언마운트 될 때 리스너를 제거하는 식의 클린업 함수를 활용이 가능하다