무엇
compilationMode는 컴파일러가 어떤 함수를 컴파일할지 고르는 규칙이다. 기본값은 'infer'다.
Babel 플러그인 옵션 객체에 넣는다.
['babel-plugin-react-compiler', {
compilationMode: 'infer', // 기본값
}]
값은 네 가지다. 'infer'·'annotation'·'syntax'·'all'.
무슨 일이 일어나나
각 값은 대상 함수를 고르는 기준이 다르다.
'infer'(기본) — 휴리스틱으로 컴포넌트·훅을 알아낸다."use memo"가 붙은 함수, 그리고 이름이 컴포넌트(PascalCase)나 훅(use접두사) 규칙을 따르면서 JSX를 만들거나 다른 훅을 부르는 함수를 대상으로 삼는다.'annotation'—"use memo"지시어가 붙은 함수만 컴파일한다. 점진 도입에 맞는다.'syntax'— Flow의 component·hook 문법을 쓴 것만 컴파일한다. Flow가 필요하고 TypeScript에서는 동작하지 않는다.'all'— 최상위 함수를 전부 컴파일한다. React가 아닌 함수까지 건드릴 수 있어 권장되지 않는다.
모드와 무관하게 "use no memo"가 붙은 함수는 항상 건너뛴다.
사용법
기본값이면 이름 규칙만 지키면 알아서 잡힌다. 대상을 좁히려면 'annotation'으로 두고 원하는 함수에만 지시어를 붙인다.
module.exports = {
plugins: [
['babel-plugin-react-compiler', {
compilationMode: 'annotation', // "use memo" 붙은 함수만
}],
],
}
'infer'에서 어떤 컴포넌트가 안 잡히면, 지시어로 억지로 켜기보다 이름 규칙(PascalCase·use 접두사)을 먼저 맞추는 편이 낫다.
실무 예시
이미 굴러가는 코드베이스에 처음 들일 때는 전부 켜지 말고 표시한 함수만 컴파일한다. 리프 컴포넌트부터 "use memo"를 붙여가며 범위를 넓힌다.
function Chart({ points }: { points: number[] }) {
'use memo' // annotation 모드에서 이 함수만 컴파일 대상
// ...무거운 렌더 로직
return <svg>{/* ... */}</svg>
}
왜 중요한가
도입 전략을 정하는 스위치다. 새 프로젝트라면 기본 'infer'로 두면 대부분 알아서 처리되고, 기존 코드에 점진 도입할 때만 'annotation'으로 좁힌다. 'all'은 React 아닌 함수까지 컴파일해 득보다 실이 크고, 'syntax'는 Flow 전용이라 실무에서 쓸 일이 드물다. 결국 실제로 만지는 값은 두 개뿐이다.
Reference