참고자료: https://frontendmasters.com/blog/react-internals-which-useeffect-runs-first/

부모-자식 구조에서 useEffect는 누구 먼저 실행될까?

예상과 달리, 자식 컴포넌트의 useEffect가 먼저 실행된다.

왜 그런 걸까?

🧪 예제 코드

function Parent() {
  useEffect(() => {
    console.log('Parent effect');
  }, []);

  return <Child />;
}

function Child() {
  useEffect(() => {
    console.log('Child effect');
  }, []);

  return <div />;
}

function App() {
  return <Parent />;
}

✅ 실제 출력 결과:

Child effect
Parent effect

📦 React 내부에서 무슨 일이 일어나고 있을까?

React는 렌더링과 effect 실행을 다음과 같은 3단계로 나눠 처리한다:

1. Render Phase

• App → Parent → Child 순으로 위에서 아래로 컴포넌트를 실행하며 JSX 반환
• 이때 useEffect()는 실행되지 않고, 내부적으로 등록만 해둔다

2. Commit Phase

• Virtual DOM → 실제 DOM으로 변경이 반영되는 단계
• DOM 업데이트가 끝난 직후, React는 useEffect()를 Effect Queue에 모아둔다

3. Effect Phase

• 이때가 돼서야 useEffect() 콜백이 실제로 실행된다
• 순서는? 👉 자식 → 부모