방금 우연하게 useEffect
에 대해서 체크해보고 싶은 것들이 있어서 검색을 하던 중에 useEffect
의 작동 순서에 대해 검색을 해보던 중에 충격적인 사실을 알게 되서 이렇게 글을 쓰게 된다.
지금까지 나는 useEffect가 top-botton 방식으로 작동한다 라고 알고 있었다!! 하지만 이와 정반대로 bottom - top 방식으로 작동한다.
바로 코드를 통해서 체크해보았다.
// parent
const Parent = () => {
useEffect(() => {
console.log('parent component useEffect');
}, [])
return (
<Child />
)
}
const Child = () => {
useEffect(() => {
console.log('child component useEffect');
}, [])
}
이 두 개의 컴포넌트를 실행해보면
child component useEffect
parent component useEffect
의 순서로 console에 찍히게 된다..
나름 착각한 이유가 있었는데, dor.gg 작업을 하면서 App.js
에서 currentUser를 query를 사용해서 체크하고 그 아래 컴포넌트에서 이를 사용하는 방식으로 이루어져있었다.
react query
를 사용하기에 isLoading
중에는 로딩창이 나오도록 해놓았었다.
그렇기에 App
에서 useEffect
를 사용해서 console을 찍었을 때, 가장 먼저 뜬 것이었다.
app (isLoading의 로딩창 중에 실행)
---
(app에서 return 된 우리 페이지가 렌더링 된 후에 useEffect 실행)
bottom
top
useEffect
는 bottom -> top으로 실행된다.
https://blog.logrocket.com/post-hooks-guide-react-call-order/