개요
기존 React에서는 불필요한 리렌더링을 막기 위해 memo, useMemo, useCallback 같은 수동 최적화가 필요하다.
하지만 React Compiler는 빌드 타임에 코드를 정적 분석해 자동 메모이제이션을 적용하므로, 이제 개발자가 직접 useMemo, useCallback을 사용하지 않아도 된다.
이를 통해 성능은 개선되고, 개발자는 불필요한 최적화 코드 작성 부담 없이 간결하고 유지보수하기 쉬운 코드를 작성할 수 있으며, 전체 애플리케이션의 성능 향상 효과를 기대할 수 있다.
사전준비
pnpm dlx react-compiler-healthcheck@latest
현재 프로젝트가 React Compiler와 호환 가능한지 사전 점검한다.
(훅 규칙 위반, 최적화 불가능한 패턴 등을 미리 확인)
설치단계
1단계
pnpm add -D babel-plugin-react-compiler@rc eslint-plugin-react-hooks@^6.0.0-rc.1
-
babel-plugin-react-compiler
→ React Compiler를 Babel 플러그인으로 적용. 빌드 시 자동 최적화 수행. -
eslint-plugin-react-hooks (rc 버전)
→ 기본 훅 규칙 + 컴파일러 호환 규칙 제공.
잘못된 훅 사용이나 최적화 불가능한 패턴을 린트 단계에서 조기 차단.
2단계
pnpm add react-compiler-runtime@rc
→ 컴파일된 코드 실행에 필요한 런타임 헬퍼 제공. 설치하지 않으면 동작 오류 발생 가능.
⚠️ React 버전
React Compiler는 React 19 RC에서 최적의 성능을 발휘한다.
React 17 또는 18에서도 사용할 수 있지만, 이 경우 반드시
react-compiler-runtime 패키지를 추가 설치해야 컴파일된 코드가 정상 동작한다.
최소 지원 버전은 React 17
적용단계
Vite 설정
export default defineConfig(() => {
return {
plugins: [
react({
babel: {
plugins: [
["babel-plugin-react-compiler", {}],
],
},
}),
],
};
});Vite는 기본적으로 Babel을 사용하지 않기 때문에, vite.config.js에서 Babel 플러그인을 명시적으로 추가해야 React Compiler가 동작한다.
React Compiler를 빌드 과정에 연결하고 자동 최적화를 활성화하기 위해 꼭 필요한 설정
ESLint 규칙 추가
React Compiler를 사용하면 useMemo/useCallback 대부분은 불필요해진다.
불필요한 사용을 막기 위해 다음 규칙을 추가할 수 있다.
{
"rules": {
"no-restricted-syntax": [
"error",
{
"selector": "CallExpression[callee.name='useMemo']",
"message": "useMemo는 권장되지 않습니다. React Compiler가 자동 최적화를 적용합니다."
},
{
"selector": "CallExpression[callee.name='useCallback']",
"message": "useCallback은 권장되지 않습니다. 특별한 이유가 없다면 일반 함수로 작성하세요."
}
]
}
}이 규칙은 특정 문법 패턴(AST 기준)을 금지할 수 있는데, 여기서는 아래 두 가지를 지정
-
CallExpression[callee.name='useMemo']
→ useMemo(...)라는 함수 호출을 전부 금지 -
CallExpression[callee.name='useCallback']
→ useCallback(...)라는 함수 호출을 전부 금지
마이그레이션
→ ESLint로 검사 후, 에러가 발생하는 useMemo, useCallback을 점진적으로 제거한다.
package.json의 scripts 설정에 따라 마이그레이션 동작 방식이 달라진다.
각 프로젝트 상황에 맞게 스크립트를 확인하고 적용하는 것을 권장
ex) pnpm format
React Compiler 적용 확인 방법
React Compiler가 제대로 적용되었는지는 React Developer Tools(React DevTools) 에서 확인할 수 있다.
DevTools에서 특정 컴포넌트 옆에 memo✨태그가 붙어있다면, React Compiler가 해당 컴포넌트를 자동으로 메모이제이션 처리했다는 의미이다.
