UseEffect Ex2

 

'Nextjs useEffect'에서 AppRouter, AppState설명 참고

 

import Router, { useRouter } from "next/router";
import { useEffect, useState } from "react";

const AppRouter: React.FC = () => {
	//function App2() {
		let router1 = useRouter();
	
		useEffect(()=>{
			console.log("UseEffectV1 main call");
			return ()=> {
				console.log("UseEffectV1 return call");
			}
		});
	
		let data1 = "aaa";
		useEffect(()=>{
			console.log("UseEffectV2 main call d: " + data1);
			return ()=> {
				console.log("UseEffectV2 return call d: " + data1);
			}
		}, [data1]);
	
		console.log("Router.reload");
		setTimeout(() => {router1.reload();}, 1000);
	
		return (
			<div >
				<h1> hello d: {data1}</h1>
			</div>
		);
	}

const AppState: React.FC = () => {
//function App2() {

	useEffect(()=>{
		console.log("UseEffectV1 main call");
		return ()=> {
			console.log("UseEffectV1 return call");
		}
	});

	let [data1, setData1] = useState(0); //let data1 = 0;
	useEffect(()=>{
		console.log("UseEffectV2 main call d: " + data1);
		return ()=> {
			console.log("UseEffectV2 return call d: " + data1);
		}
	}, [data1]);

	let [data2, setData2] = useState(0);
	setTimeout(() => {
		setData2(data2+1);
		if(data2%3==2) { setData1(data1+1); }
		}, 1000);
	console.log("data val 1: " + data1 + " 2: " + data2);

	return (
		<div >
			<h1> hello d: {data1} s1: {data2}</h1>
		</div>
	);
}

//export default AppRouter;
export default AppState;

 

AppRouter결과

매번 전체가 갱신된다

 

AppState결과

 

data2가 변경될 때 useEffect내부는 갱신 되지 않는다.

useEffect에 지정된 data1이 변경될 때 useEffect내부도 갱신 된다.