탄생
화면에 나타나는 것 Mount
ComponentDidMount
변화
업데이트(리렌더) Update
ComponentDidUpdate
죽음
화면에서 사라짐 UnMount
ComponentWillUnmount
import React, { useEffect, useState } from "react";
const UnmountTest = () => {
useEffect(() => {
console.log("Mount!");
return () => {
// Unmount 시점에 실행되게 됨
console.log("Unmount!!");
};
}, []);
return <div>Unmount Testing Component</div>;
};
const Lifecycle = () => {
const [isVisible, setIsVisible] = useState(false);
const toggle = () => setIsVisible(!isVisible);
return (
<div style={{ padding: 20 }}>
<button onClick={toggle}>ON/OFF</button>
{isVisible && <UnmountTest />}
</div>
);
};
export default Lifecycle;
2019.06 정식 출시된 기능
Class형 Component의 길어지는 코드 길이 문제
중복 코드, 가독성 문제 등을 해결하기 위해 등장했다.