다음 리액트 코드의 실행 순서에 대해 설명해주세요.

분야: 프론트엔드

아래의 코드에서 최초 마운트 및 버튼 클릭 시, console.log가 어떤 순서로 출력되는지 설명해주세요. 🙂

import { useState, useEffect } from 'react';

function Parent() {
  const [count, setCount] = useState(0);

  console.log('1');

  useEffect(() => {
    console.log('2');
    return () => {
      console.log('3');
    };
  }, [count]);

  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={() => setCount((prev) => prev + 1)}>+1</button>
      <Child value={count} />
    </div>
  );
}

function Child({ value }) {
  console.log('4');

  useEffect(() => {
    console.log('5');
    return () => {
      console.log('6');
    };
  }, []);

  return <p>자식 값: {value}</p>;
}

export default Parent;

답변 보기

최초 마운트 시

1 -> 4 -> 5 -> 2

1. Parent 함수가 실행되면서 "1"이 출력됩니다.
2. Parent 실행 도중 내부의 Child 함수가 호출되므로 "4"가 출력됩니다.
3. 이후, 마운트 후 실행되는 useEffect 콜백들이 실행됩니다. 먼저 Child의 useEffect 콜백이 실행되어 "5"가 출력됩니다.
4. 이어서 Parent의 useEffect 콜백이 실행되어 "2"가 출력됩니다

버튼 클릭 시

1 -> 4 -> 3 -> 2

사용자가 버튼을 클릭하면 setCount를 통해 count 상태가 변경되고, Parent 컴포넌트가 다시 렌더링됩니다. 이때 console.log의 흐름은 다음과 같습니다.

1. Parent 함수가 다시 실행되어 "1"이 출력됩니다.
2. Parent 내부 Child 함수도 다시 실행되어 "4"가 출력됩니다.
3. 그후 Parent의 useEffect 콜백이 실행되기 전에 cleanup 함수가 먼저 호출되어 "3"이 출력됩니다.
4. 그런 다음 Parent의 useEffect 콜백이 다시 실행되며 "2"가 출력됩니다.

Child의 useEffect는 빈 배열을 의존성으로 가지고 있으므로 처음 마운트될 때만 실행되고, 리렌더시에는 실행되지 않습니다. 따라서 "5"이나 "6"은 출력되지 않습니다.