[React] useEffect 작동 순서

글을 쓴 이유

방금 우연하게 useEffect에 대해서 체크해보고 싶은 것들이 있어서 검색을 하던 중에 useEffect의 작동 순서에 대해 검색을 해보던 중에 충격적인 사실을 알게 되서 이렇게 글을 쓰게 된다.

지금까지 나는 useEffect가 top-botton 방식으로 작동한다 라고 알고 있었다!! 하지만 이와 정반대로 bottom - top 방식으로 작동한다.

useEffect의 작동 순서

바로 코드를 통해서 체크해보았다.

// 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/