[BFE.dev] useEffect() 3

useEffect() 3

import * as React from "react";
import { useState, useEffect } from "react";
import { createRoot } from "react-dom/client";

function App() {
  const [count, setCount] = useState(1)
  console.log(1)
  useEffect(() => {
    console.log(2)
    return () => {
      console.log(3)
    }
  }, [count])

  useEffect(() => {
    console.log(4)
    setCount(count => count + 1)
  }, [])
  return <Child count={count} />
}

function Child({ count }) {
  useEffect(() => {
    console.log(5)`
    return () => {
      console.log(6)
    }
  }, [count]);

  return null;
};

const root = createRoot(document.getElementById('root'));
root.render(<App/>)

출력 결과

1
5
2
4
1
6
3
5
2

풀이 과정

1. 초기 렌더링

• 1 출력: root.render(<App />)가 실행되면서 1이 출력됩니다.

• 5 출력: 자식 컴포넌트의 useEffect가 먼저 실행되어 5가 출력됩니다.

  🤔 왜 자식 컴포넌트의 useEffect가 먼저 실행될까?

  만약 부모의 useEffect가 먼저 실행되어 어떤 데이터를 바꿔버린다면 아직 준비되지 않은 자식 컴포넌트는 에러가 나거나 잘못된 상태를 보게 될 수 있습니다. 그래서 리액트는 "자식이 완벽하게 준비된 것을 보장한 뒤"에 부모의 이펙트를 실행합니다.

• 2 출력: 부모 컴포넌트의 첫 번째 useEffect 실행되어 2가 출력됩니다.

• 4 출력: 부모 컴포넌트의 두 번째 useEffect 실행되어 4가 출력됩니다.

2. 상태 업데이트 후 재렌더링

• 1 출력: <App />이 리렌더되고 1이 출력됩니다.

• 6 출력: useEffect의 Cleanup 함수가 실행되어 6이 출력됩니다.

• 3 출력: useEffect의 Cleanup 함수가 실행되어 3이 출력됩니다.

• 5 출력: 자식 컴포넌트의 useEffect가 먼저 실행되어 5가 출력됩니다.

• 2 출력: 부모 컴포넌트의 첫 번째 useEffect 실행되어 2가 출력됩니다.