React Lifecycle

React.Component Lifecycle

https://twitter.com/dan_abramov/status/981712092611989509

React Hooks Lifecycle

https://github.com/Wavez/react-hooks-lifecycle

React Hook flow

https://github.com/donavon/hook-flow

• https://egghead.io/lessons/react-understand-the-react-hook-flow

const Child = () => {
	console.log("%c    Child: render 시작", "color: MediumSpringGreen");

	const [count, setCount] = useState(() => {
		console.log("%c    Child: useState callback 호출", "color: tomato");
		return 0;
	});

	useEffect(() => {
		console.log("%c    Child: useEffect - deps 없음", "color: LightCoral");
		return () => {
			console.log("%c    Child: useEffect cleanup - deps 없음", "color: LightCoral");
		};
	});

	useEffect(() => {
		console.log("%c    Child: useEffect - deps [] ", "color: MediumTurquoise");
		return () => {
			console.log("%c    Child: useEffect cleanup - deps []", "color: MediumTurquoise");
		};
	}, []);

	useEffect(() => {
		console.log("%c    Child: useEffect - deps [count]", "color: HotPink");
		return () => {
			console.log("%c    Child: useEffect cleanup - deps [count]", "color: HotPink");
		};
	}, [count]);

	const element = <button onClick={() => setCount((previousCount) => previousCount + 1)}>{count}</button>;

	console.log("%c    Child: render 끝", "color: MediumSpringGreen");

	return element;
};

const App = () => {
	console.log("%cApp: render 시작", "color: MediumSpringGreen");

	const [showChild, setShowChild] = useState(() => {
		console.log("%cApp: useState callback 호출", "color: tomato");
		return false;
	});

	useEffect(() => {
		console.log("%cApp: useEffect - deps 없음", "color: LightCoral");
		return () => {
			console.log("%cApp: useEffect cleanup - deps 없음", "color: LightCoral");
		};
	});

	useEffect(() => {
		console.log("%cApp: useEffect - deps []", "color: MediumTurquoise");
		return () => {
			console.log("%cApp: useEffect cleanup - deps []", "color: MediumTurquoise");
		};
	}, []);

	useEffect(() => {
		console.log("%cApp: useEffect - deps [showChild]", "color: HotPink");
		return () => {
			console.log("%cApp: useEffect cleanup - deps [showChild]", "color: HotPink");
		};
	}, [showChild]);

	const element = (
		<>
			<label>
				<input type="checkbox" checked={showChild} onChange={(e) => setShowChild(e.target.checked)} /> Child 보기
			</label>
			<div
				style={{
					padding: 10,
					margin: 10,
					height: 30,
					width: 30,
					border: "solid",
				}}
			>
				{showChild ? <Child /> : null}
			</div>
		</>
	);

	console.log("%cApp: render 끝", "color: MediumSpringGreen");

	return element;
};

페이지 진입

App: render 시작
App: useState callback 호출
App: render 끝
App: useEffect - deps 없음
App: useEffect - deps []
App: useEffect - deps [showChild]

Child 보기 체크박스 on

App: render 시작
App: render 끝
    Child: render 시작
    Child: useState callback 호출
    Child: render 끝
    Child: useEffect - deps 없음
    Child: useEffect - deps []
    Child: useEffect - deps [count]
App: useEffect cleanup - deps 없음
App: useEffect cleanup - deps [showChild]
App: useEffect - deps 없음
App: useEffect - deps [showChild]

Child의 Count 버튼 클릭

    Child: render 시작
    Child: render 끝
    Child: useEffect cleanup - deps 없음
    Child: useEffect cleanup - deps [count]
    Child: useEffect - deps 없음
    Child: useEffect - deps [count]

Child 보기 체크박스 off

App: render 시작
App: render 끝
    Child: useEffect cleanup - deps 없음
    Child: useEffect cleanup - deps []
    Child: useEffect cleanup - deps [count]
App: useEffect cleanup - deps 없음
App: useEffect cleanup - deps [showChild]
App: useEffect - deps 없음
App: useEffect - deps [showChild]