gating

01무엇

gating은 컴파일된 코드를 런타임 피처 플래그로 켜고 끄게 하는 옵션이다. 기본값은 null(비활성)이다.

플래그 함수가 있는 모듈 경로(source)와 그 함수 이름(importSpecifierName)을 준다.

['babel-plugin-react-compiler', {
  gating: {
    source: './src/utils/feature-flags',
    importSpecifierName: 'shouldUseCompiler',
  },
}]

02무슨 일이 일어나나

gating을 켜면 컴파일러가 각 함수에 대해 최적화 버전과 원본 버전을 둘 다 내보내고, 지정한 플래그 함수의 반환값으로 둘 중 하나를 고른다.

import { shouldUseCompiler } from './src/utils/feature-flags'

const Button = shouldUseCompiler()
  ? function Button_optimized(props) { /* 컴파일된 버전 */ }
  : function Button_original(props) { /* 원본 */ }

플래그 함수는 모듈 로드 시점에 한 번 평가된다. 번들이 파싱·실행되고 나면 그 선택은 브라우저 세션 내내 고정된다.

03사용법

플래그 함수는 boolean을 돌려주는 named export여야 한다(default export 아님). 이름은 importSpecifierName과 정확히 맞춘다.

export function shouldUseCompiler() {
  return getFeatureFlag('react-compiler-enabled')
}

04실무 예시

컴파일러를 전 사용자에게 한 번에 켜는 대신, 일부에게만 켜서 성능·회귀를 관찰한 뒤 넓히고 싶을 때 쓴다. 플래그 백엔드가 켜라고 하면 최적화 버전이, 아니면 원본이 실행된다.

module.exports = {
  plugins: [
    ['babel-plugin-react-compiler', {
      gating: {
        source: './src/utils/feature-flags',
        importSpecifierName: 'shouldUseCompiler',
      },
    }],
  ],
}

05왜 중요한가

컴파일러를 안전하게 굴리는 안전밸브다. 대규모 앱에서 한 번에 전환하기 부담스러울 때, 소수에게 먼저 켜서 문제를 잡고 점진적으로 넓힐 수 있다. 다만 두 벌의 코드가 번들에 실리는 비용이 있어, 전환이 끝나면 걷어내는 게 맞다. 대부분의 앱은 이 옵션 없이 그냥 컴파일러를 켠다.

Reference