target

01무엇

target은 컴파일러가 어느 React 버전에 맞춰 코드를 낼지 정하는 옵션이다. 기본값은 '19'다.

['babel-plugin-react-compiler', {
  target: '19', // 기본값
}]

값은 문자열 '17'·'18'·'19' 중 하나다. 숫자가 아니라 문자열로, 패치 버전 없이 메이저만 쓴다('18.2.0' 아니라 '18').

02무슨 일이 일어나나

컴파일러는 메모이제이션을 위해 런타임 헬퍼(c)를 import하는 코드를 만든다. target이 그 import 경로를 가른다.

React 19는 이 헬퍼를 내장한다.

import { c as _c } from 'react/compiler-runtime'

React 17·18에는 내장 런타임이 없어, 폴리필 패키지 react-compiler-runtime을 대신 import한다.

import { c as _c } from 'react-compiler-runtime'

그래서 '17'·'18'을 노리면 이 패키지를 따로 설치해야 한다. '19'는 추가 설치가 필요 없다.

03사용법

React 19면 기본값 그대로 둔다. 아직 18을 쓰는 프로젝트라면 런타임을 설치하고 target을 내린다.

// npm install react-compiler-runtime@latest 후
module.exports = {
  plugins: [
    ['babel-plugin-react-compiler', {
      target: '18',
    }],
  ],
}

17도 방식은 같다. react-compiler-runtime@latest를 설치하고 target: '17'로 둔다.

04실무 예시

당장 React 19로 못 올리는 기존 앱에도 컴파일러를 들일 수 있다. 런타임 폴리필을 설치하고 지금 버전에 맞춰 target만 내리면 된다.

module.exports = {
  plugins: [
    // 설치: npm install react-compiler-runtime@latest
    ['babel-plugin-react-compiler', { target: '18' }],
  ],
}

05왜 중요한가

옵션 중 실제로 가장 자주 만지는 값이다. 컴파일러 자체는 대부분 기본값으로 충분하지만, target만은 프로젝트의 React 버전에 맞춰야 한다. 19면 손댈 일이 없고, 17·18이면 런타임 설치와 함께 반드시 맞춰야 하는 지점이다.

Reference