무엇
React Compiler는 빌드 타임에 도는 도구다. 컴포넌트와 훅을 읽고 필요한 자리에 메모이제이션을 자동으로 넣어, 손으로 붙이던 useMemo·useCallback·memo를 대신한다.
본체는 Babel 플러그인 babel-plugin-react-compiler다. 개발 의존성으로 설치한다.
npm install -D babel-plugin-react-compiler@latest
React 19에 맞춰 설계됐지만 React 17·18도 지원한다(이 경우 target 설정과 런타임 패키지가 필요하다).
무슨 일이 일어나나
컴파일러는 소스를 빌드 산출물로 바꾸는 변환 단계에 끼어든다. 그래서 프레임워크나 번들러가 쓰는 Babel 파이프라인에 플러그인으로 연결한다. 최적화된 컴포넌트는 산출물에서 react/compiler-runtime의 헬퍼를 불러오는데, 빌드 출력에 import { c as _c } from "react/compiler-runtime"가 보이면 컴파일러가 적용됐다는 뜻이다.
동작 확인은 React DevTools로도 된다. 최적화된 컴포넌트 이름 옆에 "Memo ✨" 배지가 붙는다.
사용법
빌드 도구마다 연결 지점이 다르다.
Babel — 플러그인 목록 맨 앞에 둔다. 다른 변환보다 먼저 돌아야 하기 때문이다.
Vite — @vitejs/plugin-react v6 이상에서 컴파일러 프리셋으로 켠다.
Next.js·Expo·React Native(Metro)·Webpack·Rspack·Rsbuild — 각 도구의 공식 문서가 안내하는 스위치를 따른다. Rspack·Rsbuild는 기본 지원한다.
린트 규칙은 별도 패키지가 아니라 eslint-plugin-react-hooks에 합쳐졌다. 예전 eslint-plugin-react-compiler를 깔았다면 지우고 이걸 쓴다.
npm install -D eslint-plugin-react-hooks@latest
실무 예시
Babel을 직접 쓰는 프로젝트라면 설정 파일에 플러그인 한 줄을 더하는 게 전부다.
module.exports = {
plugins: [
'babel-plugin-react-compiler', // 반드시 목록 맨 앞
],
}
린트는 flat config에서 프리셋을 얹는다. recommended-latest에 컴파일러 규칙이 들어 있다.
import reactHooks from 'eslint-plugin-react-hooks'
export default [reactHooks.configs['recommended-latest']]
왜 중요한가
설치는 컴파일러를 쓰기 위한 관문이다. 한 번 제대로 연결하면 손 메모이제이션의 부담이 사라지고, 이후엔 코드를 그냥 짜면 된다. 다만 이건 개념이 아니라 설정 작업이라, 깊이 파고들 대상은 아니다. 프레임워크마다 켜는 방법이 조금씩 다르니 자기 빌드 도구의 공식 안내를 정확히 따르는 게 핵심이다.
Reference