React 코드의 렌더링 순서 설명하기

하영·2025년 6월 20일

React

목록 보기

26/26

📝 React 코드의 렌더링 순서 설명하기

렌더링 순서를 공부하다가 갑자기 useEffect나 React.memo를 제대로 이해하고 있는지 의문이 들었다. 각각의 역할은 아는데 전체 코드를 보고 console 출력 순서를 설명해보라고 하면 틀릴 것 같은 너낌.. 그래서 간단하게 정리해보았다.

01. React 렌더링 간단 정리

React 컴포넌트가 실행되고 Virtual DOM을 만든 뒤, 실제 DOM을 업데이트하는 과정이다.

✅ 주요 단계

단계	설명
Trigger	`state`, `props`가 변경되면 렌더링 필요 신호 발생
Render	컴포넌트 함수 실행 → Virtual DOM 생성 → 이전과 비교(diff)
Commit	실제 DOM 업데이트 + `useEffect`, `ref` 처리 등

[Render Phase]
1. 부모 render() 실행
2. JSX 중 자식 컴포넌트 만나면 자식 render() 실행
3. JSX 트리 구성 (return 내부 console.log 실행됨)

[Commit Phase]
4. 실제 DOM 업데이트
5. useEffect 실행 (부모, 자식 순은 보장되지 않음)

02. 코드 실행순서 실습

2-1. 기본 렌더링 + useEffect

👩🏻‍💻 App 컴포넌트

const App = () => {
  const [count, setCount] = useState(0);
  console.log("❤️ App render");

  useEffect(() => {
    console.log("❤️ App useEffect - 의존성 배열: 빈배열");
  }, []);

  useEffect(() => {
    console.log("❤️ App useEffect - 의존성 배열: count", count);
  }, [count]);

  return (
    <div>
      {console.log("❤️ App return 내부 console")}
      <h1>Count: {count}</h1>
      <button onClick={() => setCount((c) => c + 1)}>+1</button>
      <Child />
    </div>
  );
};

👩🏻‍💻 Child 컴포넌트

const Child = () => {
  console.log("💙 Child render");

  useEffect(() => {
    console.log("💙 Child  useEffect");
  }, []);

  return (
    <div>{console.log("💙 Child return 내부 console")}자식 컴포넌트</div>
  );
};