1. install React.19 RC

npm install react@rc react-dom@rc

Typescript 의 타입 지원 설정 :

// package.json 에 다음을 추가
{
  "dependencies": {
    "@types/react": "npm:types-react@rc",
    "@types/react-dom": "npm:types-react-dom@rc"
  },
  "overrides": {
    "@types/react": "npm:types-react@rc",
    "@types/react-dom": "npm:types-react-dom@rc"
  }
}

1. Codebase 라이브러리의 호환성 검사

# npx react-compiler-healthcheck@latest

// 이런 추가 인스톨이 필요하다는 프롬프트가 나오면,
Need to install the following packages:
[email protected]
// 'y' 를 쳐줍시다.
Successfully compiled 48 out of 56 components.
StrictMode usage not found.
Found no usage of incompatible libraries.
// incompatible libraries 가 없다면 free to go

react 생태계 모든 라이브러리의 정상작동이 보장되지 않습니다.

1. EsLint

npm install eslint-plugin-react-compiler

// eslint config 에 추가
module.exports = {
  plugins: [
    'eslint-plugin-react-compiler',
  ],
  rules: {
    'react-compiler/react-compiler': "error",
  },
}

1. 번들러 특화 설정

   1. 
      
   2. Babel

   
   npm install babel-plugin-react-compiler
   // babel.config.js
   const ReactCompilerConfig = {  };
   
   module.exports = function () {
     return {
       plugins: [
         ['babel-plugin-react-compiler', ReactCompilerConfig], // must run first!
         // ...
       ],
     };
   };
   
   

   b. vite

   
   // vite.config.js
   const ReactCompilerConfig = {  };
   
   export default defineConfig(() => {
     return {
       plugins: [
         react({
           babel: {
             plugins: [
               ["babel-plugin-react-compiler", ReactCompilerConfig],
             ],
           },
         }),
       ],
       // ...
     };
   });
   
   // Reactt.Compiler 의 옵션 설정
   // 디폴트 설정은 모든 컴포넌트에서 컴파일러 true 입니다.
   // annotation 모드를 설정해주면, 각 컴포넌트에서 use memo 스테이트먼트를 사용할 수 있습니다.
   const ReactCompilerConfig = { 
     compilationMode: "annotation",
   };
   
   
   

   c. Next.js

   
   // Next.js canary, which uses React 19 Release Candidate
   npm install next@canary babel-plugin-react-compiler
   
   // next.config.js
   
   const nextConfig = {
     experimental: {
       reactCompiler: true,
       // 또는
       // reactCompiler: "annotation"
     },
   };
   
   module.exports = nextConfig;
   
   
   

   d. Remix

   ..는 문헌을 참조

컴포넌트에서 React.Compiler 사용: