2023년 08월 18일

1. 실행 환경 및 코드

nextjs의 실행 순서를 알아보려고 한다. react를 처음 학습할 때 배웠던 내용이지만 next에서는 테스트 해본 적이 없기 때문에 복습하는 겸 다시 한번 테스트해보려고 한다.

실행 환경은 next 13 버전을 기준으로 테스트해보았으며 strict mode에서 오류를 감지하기 위해 한번 더 렌더링되는 것을 방지하기 위해 strict mode는 false로 바꾼 뒤 테스트하였다.

app → outer → inner 컴포넌트를 기준으로 테스트해보았다. 테스트 코드는 아래와 같다.

// pages/_app.jsx

import { useEffect, useLayoutEffect } from "react";

const MyApp = ({ Component, pageProps }) => {
  console.log("app console 1");
  useEffect(() => console.log("app useEffect1"), []);
  console.log("app console 2");
  useLayoutEffect(() => console.log("app useLayoutEffect"), []);
  useEffect(() => console.log("app useEffect2"), []);

  return (
    <div>
      {(() => {
        console.log("app return");

        return <></>;
      })()}
      <Component {...pageProps} />
    </div>
  );
};

export default MyApp;

// pages/index.jsx
import Outer from "./components/outer";

const Home = () => {
  return (
    <div>
      <Outer />
    </div>
  );
};

export default Home;

// pages/components/outer.jsx
import Inner from "./inner";
import { useEffect, useLayoutEffect } from "react";

const Outer = () => {
  console.log("outer: console 1");
  useEffect(() => console.log("outer: useEffect 1"), []);
  console.log("outer: console 2");
  useLayoutEffect(() => console.log("outer useLayoutEffect"), []);
  useEffect(() => console.log("outer: useEffect 2"), []);

  return (
    <div>
      {(() => {
        console.log("outer return");

        return <></>;
      })()}
      <p>Outer</p>
      <Inner />
    </div>
  );
};

export default Outer;

// pages/components/inner.jsx
import { useEffect, useLayoutEffect } from "react";

const Inner = () => {
  console.log("inner: console 1");
  useEffect(() => console.log("inner: useEffect 1"), []);
  console.log("inner: console 2");
  useLayoutEffect(() => console.log("inner: useLayoutEffect"), []);
  useEffect(() => console.log("inner: useEffect 2"), []);

  return (
    <div>
      {(() => {
        console.log("inner return");

        return <></>;
      })()}
      <p>Inner</p>
    </div>
  );
};

export default Inner;

최상위 컴포넌트 App과 상위 컴포넌트 Outer, 그리고 Outer 내부에 자식 컴포넌트로 Inner 컴포넌트가 있다. 내부 로직은 로직단에서 console.log를 트리거 시키고 useEffect, useLayoutEffect를 트리거 시켰다. 그리고 렌더단에서는 return 함수가 트리거되는 것을 체크하기 위해 console.log를 트리거시켰다.

2. 실행 결과

실행 결과는 위 이미지와 같다.

1. 처음으로 최상위 컴포넌트 app의 로직단인 console.log 1과 console.2 가 실행된다.
2. app의 로직단 실행 후 렌더단의 return 함수가 실행된다. 왜냐하면 화면을 렌더링 하기 위해 자식 컴포넌트가 필요하기 때문이다.
3. app의 자식 컴포넌트인 outer 컴포넌트의 로직단인 console.log 1과 console.2 가 실행된다.