useEffect?

• 컴포넌트의 생명주기에 따라 특정 함수를 호출하도록 하는 훅 함수
• 개발 실행 환경(WEB 개발자모드)에서는 mount, umount가 한번 실행되고난 후 다시 mount가 됨

내부 속성

• mount : 컴포넌트가 처음 화면에 등록되었을 때
• updata : 컴포넌트가 상태가 변경되어 리렌더링 되었을 때
• umount : 컴포넌트가 화면에서 제거될 때

useEffect(호출할 콜백 함수, 스코프할 상태 배열);
useEffect(() => {},[]);

각 코드별 구문 설명

• mount 시에만 실행

useEffect(() => {
	console.log('mount!');
}, []);

• 스코프할 상태 배열을 지정하지 않은 경우 모든 상태가 바뀔때마다 실행됨

useEffect(() => {
	console.log('두번째 effect');
	setState1(state1 + 1);
});

• 스코프할 상태 배열에 상태를 지정하면 지정한 상태가 바뀔때 마다 함수가 호출됨
• 스코프할 상태 배열에 지정한 상태를 해당 effect에서 변경하면 무한 호출 됨

useEffect(() => {
	setState1(state1 + 1);
	console.log('state1 상태 변경!');
}, [state1]);

• 스코프할 상태 배열에 두 개 이상의 상태를 지정할 수 있음
• 배열에 포함된 상태 중 하나라도 변경되면 effect가 발생

useEffect(() => {
	console.log('state1 혹은 show가 변경됨');
}, [state1, show]);

• 전달한 콜백 함수의 return으로 컴포넌트가 umount 될때 실행할 함수를 반환
• 상태 스코프와 연결하여 사용할 필요가 없음

function SubComponent () {
useEffect(() => {
	console.log('sub component mount!');
	
	return () => {
		console.log('sub compnent unmount!');
	};
}, []);

return (
	<h1>sub</h1>
)

전체 코드

export default function HookComponent1() {
	const [state1, setState1] = useState<number>(0);
	const [show, setShow] = useState<boolean>(false);
	
	const func = () => {
		const [state3, setState3] = useState<number>(0);
	}
	
	const onAddClickHandler = () => {
		setState1(state1 + 1);
	};
	
	const onShowClickHandler = () => {
		setShow(!show);
	}
	
	useEffect(() => {
		console.log('mount!');
	}, []);
	
	useEffect(() => {
		console.log('두번째 effect');
			setState1(state1 + 1);
	});
	
	useEffect(() => {
		setState1(state1 + 1);
		console.log('state1 상태 변경!');
	}, [state1]);
	
	useEffect(() => {
		console.log('state1 혹은 show가 변경됨');
	}, [state1, show]);

	return (
		<div>
			{state1}
			<button onClick={onAddClickHandler}>+</button>
			<button onClick={onShowClickHandler}>show</button>
			{show && <SubComponent />}
		</div>
	)
}

function SubComponent () {
	useEffect(() => {
		console.log('sub component mount!');
		return () => {
			console.log('sub compnent unmount!');
		};
	}, []);

	return (
		<h1>sub</h1>
	)
}