React Compiler ( 리액트 컴파일러 )

 

React Compiler v 1.0 출시

2025년 10월 7일 React 컴파일러 버전 1.0 이 출시 되었다. 

"이번 릴리스는 거의 10년에 걸친 거대하고 복잡한 엔지니어링 노력의 정점" 이라고 되어 있다.

https://ko.react.dev/blog/2025/10/07/react-compiler-1

React Compiler v1.0 – React

 

리액트 컴파일러가 해결하려한 문제

1. 부모 컴포넌트가 리렌더링이 되면 자식 컴포넌트가 무조건 같이 리렌더링이 된다.

2. 1과 같은 문제는 useMemo, useCallback 을 통해 해결은 가능하다.

3. 다만 이런 훅은 의존성 배열이 필요 해서 관리 포인트가 증가하게 되고, 너무 남발하게 되면 메모리 공간을 차지 하게 된다.

 

그래서 react Compiler는 이 함수나 컴포넌트를 메모이제이션 할건지 말건지 의존성 배열은 어떤걸 넣어야 하는지 자동으로 판단하고 관리해준다.

 

이제는 새로운 react 프로젝트를 생성 시 Compiler를 초기에 적용할 수 있는 옵션 도 제공한다.

 

다만 기존 프로젝트에는 이런 옵션이 없었기 때문에 수동으로 complier를 적용해야 하는데 아래와 같은 순서로 진행하면 된다.

 

 

기존 프로젝트에 컴파일러 적용

1. 설치 

npm install -D babel-plugin-react-compiler@latest

 

npm install -D eslint-plugin-react-hooks@latest

 

 

2. eslint.config.js 설정에 권장 규칙 추가

 

// eslint.config.js
import reactHooks from 'eslint-plugin-react-hooks';
import { defineConfig } from 'eslint/config';

export default defineConfig([
  reactHooks.configs.flat.recommended,
]);

 

 

3. vite.config.ts 에  babel plugin 추가

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import path from 'path'

export default defineConfig({
  plugins: [
    react({
      babel: {                  // 바벨 플러그인 추가
        plugins: [['babel-plugin-react-compiler']],
      },
    }),
    tailwindcss(),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // @를 src로 매핑
    },
  },
})

 

 

크롬 확장 프로그램인 react DevTool 로 확인 시

컴포넌트에 useMemo를 적용 하지 않아도 자동으로 적용이 된 모습이다.