리액트 컴포넌트의 렌더링 순서

컴포넌트 렌더링 순서 예제 코드

import { useEffect } from "react";
import "./App.css";

function Child1() {
  useEffect(() => {
    console.log("Child1");
  });
  return (
    <>
      <Child2 />
    </>
  );
}
function Child2() {
  useEffect(() => {
    console.log("Child2");
  });
  return <></>;
}
function App() {
  useEffect(() => {
    console.log("App! the parent");
  });
  return (
    <div className="App">
      <Child1 />
    </div>
  );
}

export default App;

코드 실행 결과

부모 - 자식 컴포넌트 관계에서 가장 최하단에 위치하는 자식 컴포넌트인 Child2가 가장 먼저 렌더링 된다. Child2 컴포넌트의 useEffect 함수에 있는 Child2 메세지가 가장 먼저 출력된 것으로 확인할 수 있다. 그리고 가장 마지막에 App! the parent라는 메세지 출력을 보면
최상단 부모 컴포넌트인 App의 렌더링이 가장 마지막에 일어난 것을 볼 수 있다.

결론

리액트에서 컴포넌트 렌더링 순서는 최하단 컴포넌트부터 시작하여 최상단 컴포넌트가 마지막 순서가 된다.