useEffect 실행 순서

나는 지금까지 useEffect가 top → bootom 순서로 작동하는걸로 알고있었다.

하지만 알고봤더니 useEffect는 bottom → top 방식으로 작동되고 있었다.

아래 예제를 보자.

const Child = () => {
  	console.log('child')
    useEffect(() => {
      console.log('mount : child')

      return () => {
        console.log('unmount: child')
      }
    }, [])
    return {/*대충 리턴값 아무거나*/}
}

const Parent = () => {
  console.log('parent')
  useEffect(() => {
    console.log('mount : parent')
    return () => {
      console.log('unmount : parent')
    }
  }, [])

  return <Child />
}

	parent // 부모 컴포넌트 실행
    child  // 자식 컴포넌트 실행
    mount : child  // 자식 컴포넌트 useEffect 실행
    mount : parent // 부모 컴포넌트 useEffect 실행
    unmount : parent // 부모 컴포넌트 useEffect 실행
    unmount : child // 자식 컴포넌트 useEffect 실행

useEffect 실행 순서

• useEffect 를 제외한 함수내 요소들이 실행된다.
• componentDidMount는 자식 컴포넌트에서 먼저 발생한다
• componentWillUnmoint는 부모 컴포넌트에서 먼저 발생한다

참고 : https://velog.io/@yhnb3/자식-컴포넌트와-부모-컴포넌트의-useEffect의-실행-순서를-알아보자