실행 코드
<!DOCTYPE html>
<html lang="en">
<body>
<script
crossorigin
src="https://unpkg.com/react@17/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/@babel/standalone/babel.min.js"
></script>
<div id="root"></div>
<script type="text/babel">
const rootElement = document.getElementById("root");
const Child = () => {
console.log(" Child render start");
const [text, setText] = React.useState(() => {
console.log(" Child useState : text");
return "";
});
const handleChange = (e) => {
setText(e.target.value);
};
React.useEffect(() => {
console.log(" Child useEffect : empty deps");
return () => {
console.log(" Child useEffect : [Cleanup], empty deps");
};
}, []);
React.useEffect(() => {
console.log(" Child useEffect : no deps");
return () => {
console.log(" Child useEffect : [Cleanup], no deps");
};
});
React.useEffect(() => {
console.log(" Child useEffect : show deps");
return () => {
console.log(" Child useEffect : [Cleanup], text deps");
};
}, [text]);
const element = (
<>
<input onChange={handleChange} />
<p>{text}</p>
</>
);
console.log(" Child render end");
return element;
};
const App = () => {
console.log("App render start");
const [show, setShow] = React.useState(() => {
console.log("App useState : show");
return false;
});
const handleClick = () => {
setShow((prev) => !prev);
};
React.useEffect(() => {
console.log("App useEffect : no deps");
return () => {
console.log("App useEffect : [Cleanup], no deps");
};
});
React.useEffect(() => {
console.log("App useEffect : empty deps");
return () => {
console.log("App useEffect : [Cleanup], empty deps");
};
}, []);
React.useEffect(() => {
console.log("App useEffect : show deps");
return () => {
console.log("App useEffect : [Cleanup], show deps");
};
}, [show]);
console.log("App render end");
return (
<>
<button onClick={handleClick}>search</button>
{show && <Child />}
</>
);
};
ReactDOM.render(<App />, rootElement);
</script>
</body>
</html>첫 랜더링
-
App render 시작
-
App useState
-
App render 끝
-
App useEffect 모두 동작
- no deps : dependency 설정을 하지 않았다. -> 모든 변경이 있을 때 마다 동작한다.
- empty deps: dependency가 비어있다. -> 처음 랜더될 때 1회만 동작한다.
- show deps : dependency 가 show로 설정되었다. -> 처음 랜더될 때와 show가 변경될 때 동작한다.
Search 버튼 클릭
-
App render 시작
-
App render 종료
-
Child render 시작
-
Child useState
-
child render 종료
-
App useEffect Cleanup
- useEffect가 다시 실행된다면, 이전에 실행되었떤 useEffect가 종료(Cleanup)되고, 실행된다.
- 뒤에 no deps와 show deps가 실행될 것이기 때문에 첫 랜더링에서 호출되었던 두 useEffect가 종료(Cleanup)되었다.
-
Child useEffect
-
App useEffect
- 최초 1회만 실행되는 empty deps를 제외한 두 useEffect가 동작한다.
Search 버튼 다시 클릭
- App render 시작
- App render 종료
- Child useEffect Cleanup
- Child의 모든 컴포넌트가 unmount되었기 때문에, 실행되었던 모든 useEffect가 종료(Cleanup)되었다.
- App useEffect Cleanup
- App useEffect
