[Next.js] - Next.js에서 React Compiler 적용하기

 

1. React Compiler란 무엇인가?

React Compiler는 React 애플리케이션의 성능을 자동으로 최적화하는 컴파일러입니다. 개발자가 수동으로 작성해야 했던 useMemo, useCallback, React.memo 등의 메모이제이션을 자동으로 처리해줍니다.

 

주요 특징:

• 자동 메모이제이션: 컴포넌트와 함수를 자동으로 최적화
• 번들 크기 감소: 불필요한 리렌더링 방지
• 개발자 경험 향상: 수동 최적화 코드 작성 불필요

2. 버전 요구사항

React Compiler 사용 가능 버전:

• Next.js: 15.0.0 이상
• React: 18.3.0 이상 (권장: 19.0.0 이상)
• Node.js: 18.17.0 이상

 

3. Next.js 15로 업그레이드하는 방법

 

Upgrading: Version 15

 

Codemod를 통한 업그레이드 방법:

npx @next/codemod@canary upgrade latest

Next.js 15에서는 Codemod 도구가 함께 제공되어 반복적이고 오류가 생기기 쉬운 코드 수정을 자동으로 처리할 수 있습니다.

 

수동 방법:

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

 

 

4. React Compiler 설정 방법

next.config.js: reactCompiler

npm install babel-plugin-react-compiler

그리고 next.config.mjs에 experimental.reactCompile 을 추가한다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};

export default nextConfig;

끝!

 

 

 

잘 적용되었는지 확인해보기

테스트로 Page 만들어서 확인해보기

 

 

ReactCompilerTestPage.tsx

"use client";

import { useState } from "react";

import ReactCompilerTest from "@components/ReactCompilerTest";

export default function ReactCompilerTestPage() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("");

  const handleIncrement = () => {
    setCount(prev => prev + 1);
  };

  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setName(e.target.value);
  };

  return (
    <div className="container mx-auto p-8">
      <p>name: {name}</p>
      <p>count: {count}</p>

      <ReactCompilerTest handleIncrement={handleIncrement} handleNameChange={handleNameChange} />
    </div>
  );
}

 

 

ReactCompilerTest.tsx

"use client";

type Props = {
  handleIncrement: () => void;
  handleNameChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
};

export default function ReactCompilerTest({ handleIncrement, handleNameChange }: Props) {
  console.log("ReactCompilerTest render");

  return (
    <div className="p-4 border rounded-lg">
      <h2 className="text-xl font-bold mb-4">React Compiler Test</h2>

      <div className="space-y-4">
        <div>
          <label className="block text-sm font-medium mb-2">Name:</label>
          <input
            type="text"
            onChange={handleNameChange}
            className="border rounded px-3 py-2 w-full"
            placeholder="Enter your name"
          />
        </div>

        <div>
          <button onClick={handleIncrement} className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
            Increment
          </button>
        </div>
      </div>
    </div>
  );
}

 

React Compiler가 미 적용되어있다면:

input을 입력하든, Increment을 누르면 ReactCompilerTest 컴포넌트가 지속적으로 렌더링 되어 ReactCompilerTest render로그가 계속해서 보여질텐데,

 

React Compiler가 잘 적용되어있다면:

초기 생성 빼고는 알아서 잘 최적화가 되어있어 로그가 발생하지 않는다!

또 다른 방법은 개발자도구에서 Components를 선택했을때 이미지와 같이 Memo 아이콘이 보이면 최적화가 잘 적용된것입니다.