React hook의 호출타이밍
2023-04-07
안녕하세요.
지난 시간에는 React custom hook을 만드는 방법에 대해서 알아봤습니다.
이번 시간에는 React hook의 호출타이밍에 대해서 알아보겠습니다.
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
<script
crossorigin
src="https://unpkg.com/react@18/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/@babel/standalone/babel.min.js"
></script>
<script type="text/babel">
const rootElement = document.getElementById("root");
const App = () => {
const Child = () => {
console.log(" Child Render start");
const [text, setText] = React.useState(() => {
console.log(" Child useState");
return "";
});
React.useEffect(() => {
console.log(" Child useEffect no deps");
return () => {
console.log(" Child useEffect [Cleanup], no deps");
};
});
React.useEffect(() => {
console.log(" Child useEffect empty deps");
return () => {
console.log(" Child useEffect [Cleanup], empty deps");
};
}, []);
React.useEffect(() => {
console.log(" Child useEffect [text]");
return () => {
console.log(" Child useEffect [Cleanup], [text]");
};
}, [text]);
function handleChange(event) {
setText(event.target.value);
}
const element = (
<>
<input onChange={handleChange} />
<p>{text}</p>
</>
);
console.log(" Child Render end");
return element;
};
console.log("App Render start");
const [show, setShow] = React.useState(() => {
console.log("App useState");
return false;
});
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]");
return () => {
console.log("App useEffect [Cleanup], [show]");
};
}, [show]);
function handleClick() {
setShow((prev) => !prev);
}
console.log("App Render end");
return (
<>
<button onClick={handleClick}>Search</button>
{show ? <Child /> : null}
</>
);
};
ReactDOM.render(<App />, rootElement);
</script>
</body>
</html>
초기 렌더링시 다음과 같이 출력됩니다.
App Render start
App useState
App Render end
Child Render start
Child useState
Child Render end
App useEffect no deps
App useEffect empty deps
App useEffect [show]
App이 렌더링 되고, App의 useState가 호출되고나서 App이 렌더링이 끝나면서 Child가 렌더링 되고, useState가 호출되고나서 Child가 렌더링이 끝나면서 App의 useEffect가 호출됩니다.
그리고 Search 버튼을 클릭하면 검색창이 나타나면서 다음과 같이 출력됩니다.
App Render start
App Render end
Child Render start
Child useState
Child Render end
App useEffect [Cleanup], no deps
App useEffect [Cleanup], [show]
Child useEffect no deps
Child useEffect empty deps
Child useEffect [text]
App useEffect no deps
App useEffect [show]
App이 렌더링 되고 끝나면서 Child가 렌더링 되고 Child의 useState가 호출되고나서 Child가 렌더링이 끝나면서 App의 useEffect의 Cleanup이 호출되고, 다시 Child의 useEffect가 호출됩니다. 그리고 App의 useEffect가 호출됩니다.
그리고 다시 Search 버튼을 클릭하면 검색창이 사라지면서 다음과 같이 출력됩니다.
App Render start
App Render end
Child useEffect [Cleanup], no deps
Child useEffect [Cleanup], empty deps
Child useEffect [Cleanup], [text]
App useEffect [Cleanup], no deps
App useEffect [Cleanup], [show]
App useEffect no deps
App useEffect [show]
App이 렌더링 되고 끝나면서 Child의 useEffect의 Cleanup이 호출되고, App의 useEffect의 Cleanup이 호출되고, App의 useEffect가 호출됩니다.
이렇게 React hook의 호출타이밍에 대해서 알아보았습니다.
감사합니다.
< 목록으로 돌아가기