target 옵션은 컴파일러가 어떤 React 버전을 위한 코드를 생성해야 하는지 지정합니다.

{
  target: '19' // or '18', '17'
}

레퍼런스

target

컴파일된 출력의 React 버전 호환성을 설정합니다.

타입 

'17' | '18' | '19'

기본값

'19'

유효한 값

  • '19': React 19를 대상으로 합니다 (기본값). 추가 런타임이 필요하지 않습니다.
  • '18': React 18을 대상으로 합니다. react-compiler-runtime 패키지가 필요합니다.
  • '17': React 17을 대상으로 합니다. react-compiler-runtime 패키지가 필요합니다.

주의 사항

  • 숫자가 아닌 문자열 값을 사용하세요. (예: 17이 아닌 '17')
  • 패치 버전은 포함하지 마세요. (예: '18.2.0'이 아닌 '18'을 사용)
  • React 19는 컴파일러 런타임 API가 내장되어 있습니다.
  • React 17과 18은 react-compiler-runtime@latest 설치가 필요합니다.

사용법

React 19 대상으로 하기 (기본값)

React 19의 경우 특별한 설정이 필요하지 않습니다.

{
  // defaults to target: '19'
}

컴파일러는 React 19의 내장 런타임 API를 사용합니다.

// 컴파일된 출력은 React 19의 네이티브 API를 사용합니다.
import { c as _c } from 'react/compiler-runtime';

React 17 또는 18 대상으로 하기

React 17과 React 18 프로젝트의 경우 두 단계가 필요합니다.

  1. 런타임 패키지를 설치합니다.
npm install react-compiler-runtime@latest
  1. target을 설정합니다.
// For React 18
{
  target: '18'
}

// For React 17
{
  target: '17'
}

컴파일러는 두 버전 모두에 대해 폴리필 런타임을 사용합니다.

// 컴파일된 출력은 폴리필을 사용합니다.
import { c as _c } from 'react-compiler-runtime';

문제 해결

컴파일러 런타임 누락에 관한 런타임 오류

“Cannot find module ‘react/compiler-runtime‘“와 같은 오류가 표시되는 경우에는 다음과 같이 합니다.

  1. React 버전을 확인합니다.

    npm why react

  2. React 17 또는 18을 사용하는 경우 런타임을 설치합니다.

    npm install react-compiler-runtime@latest

  3. target이 React 버전과 일치하는지 확인합니다.

    {
      target: '18' // React 메이저 버전과 일치해야 합니다
    }

런타임 패키지가 작동하지 않는 경우

런타임 패키지가 다음 조건을 만족하는지 확인하세요.

  1. 프로젝트에 설치되어 있어야 합니다. (전역이 아닌)
  2. package.json의 dependencies에 나열되어 있어야 합니다.
  3. 올바른 버전이어야 합니다. (@latest 태그)
  4. devDependencies에 있으면 안 됩니다. (런타임에 필요합니다)

컴파일된 출력 확인하기

올바른 런타임이 사용되고 있는지 확인하려면 서로 다른 import를 주목하세요. (내장의 경우 react/compiler-runtime, 17/18용 독립 패키지의 경우 react-compiler-runtime)

// React 19용 (내장 런타임)
import { c } from 'react/compiler-runtime'
//                      ^

// React 17/18용 (폴리필 런타임)
import { c } from 'react-compiler-runtime'
//                      ^
이전panicThreshold
다음지시어