Oxc

JSX ​

Oxc transformer는 JSX 변환을 지원합니다.

일반 사용법 ​

js
import { transform } from "oxc-transform";

const result = await transform("App.jsx", sourceCode, {
  jsx: {
    runtime: "automatic", // 또는 "classic"
    development: false, // 또는 true
    throwIfNamespace: true, // 또는 false
    pure: true, // 또는 false
    importSource: "react",
    pragma: "React.createElement",
    pragmaFrag: "React.Fragment",
    refresh: false, // 아래 설명 참조
  },
  // TSX 파일을 변환할 때:
  typescript: {
    jsxPragma: "React.createElement", // `jsx.pragma`와 동일한 값
    jsxPragmaFrag: "React.Fragment", // `jsx.pragmaFrag`와 동일한 값
  },
});

또한 jsx: 'preserve'를 설정하여 JSX 변환을 비활성화할 수 있습니다.

Oxc transformer는 Babel 및 esbuild에서도 지원하는 JSX pragma 주석도 지원합니다. 이러한 주석은 각 파일별로 JSX 옵션을 구성하는 데 유용합니다.

런타임 ​

기본적으로 자동 런타임 변환이 사용됩니다. 이 변환은 React 17 이상에서 도입된 것입니다. 이 변환은 필요한 import 문을 자동으로 삽입합니다.

jsx.runtime 옵션을 "classic"으로 설정하면 클래식 런타임 변환을 사용할 수 있습니다.

// @jsxRuntime classic / // @jsxRuntime automatic은 프라그마 주석을 통해 이를 구성하는 방법입니다.

두 런타임 모두에 공통되는 옵션 ​

개발 전용 변환 ​

기본적으로 개발 전용 변환은 비활성화되어 있습니다. jsx.development 옵션을 true로 설정하면 이를 활성화할 수 있습니다.

XML 네임스페이스 태그 이름 ​

기본적으로 XML 네임스페이스 태그 이름 (예: <foo:bar baz:qux="foobar" />)이 사용될 경우 오류가 발생합니다. 비록 JSX 사양에서는 이를 허용하지만, 현재 React의 JSX는 이를 지원하지 않기 때문에 기본적으로 금지됩니다. 이를 허용하려면 jsx.throwIfNamespace 옵션을 false로 설정하면 됩니다.

순수 주석 (Pure Annotation) ​

기본적으로 JSX 요소는 순수 주석으로 표시됩니다. 순수 주석은 반환 값이 사용되지 않을 경우 안전하게 제거할 수 있는 표현식을 표시하는 주석입니다. 그러나 만약 JSX 요소를 유지하고자 한다면 이 기능은 원하지 않을 수 있습니다. 이 기능을 비활성화하려면 jsx.pure 옵션을 false로 설정하면 됩니다.

자동 런타임 전용 옵션 ​

가져오기 소스 ​

이 옵션은 JSX 보조 함수의 가져오기 소스를 지정합니다. 기본값은 "react"입니다.

예를 들어, react 대신 preact 패키지를 사용하고 싶다면 jsx.importSource를 "preact"로 설정하면 다음과 같은 임포트 문이 삽입될 수 있습니다:

js
import { createElement } from "preact";
import { Fragment, jsxDEV } from "preact/jsx-dev-runtime";
import { Fragment, jsx, jsxs } from "preact/jsx-runtime";

// @jsxImportSource preact는 프라그마 주석을 통해 이를 구성하는 방법입니다.

클래식 런타임 전용 옵션 ​

프라그마 ​

이 옵션은 JSX 표현식을 변환할 때 사용할 함수 이름을 지정합니다. 올바른 전체 이름 (예: React.createElement)이나 식별자 (예: createElement)여야 합니다. esbuild에서는 이 옵션을 jsxFactory라고 부릅니다.

// @jsx createElement는 프라그마 주석을 통해 이를 구성하는 방법입니다.

프라그마 프래그먼트 ​

이 옵션은 JSX 프래그먼트를 변환할 때 사용할 함수 이름을 지정합니다. 유효한 JSX 태그 이름이어야 합니다. esbuild에서는 이 옵션을 jsxFragment라고 부릅니다.

// @jsxFrag Fragment는 프라그마 주석을 통해 이를 구성하는 방법입니다.

리액트 리프레시 (React Refresh) ​

리액트 리프레시(또는 리액트 패스트 리프레시)는 개발 중에 리액트 컴포넌트에 대한 핫 리로딩 기능을 제공합니다.

사용법 ​

리액트 리프레시 변환을 활성화하려면 jsx.refresh 옵션을 설정하세요:

javascript
import { transform } from "oxc-transform";

const result = await transform("App.jsx", sourceCode, {
  jsx: {
    development: true,
    refresh: true,
    // 또는...
    // refresh: {
    //   refreshReg: "$RefreshReg$",
    //   refreshSig: "$RefreshSig$",
    //   emitFullSignatures: true,
    // },
  },
});

구성 옵션 ​

옵션타입기본값설명
refreshRegstring"$RefreshReg$"리프레시를 위해 컴포넌트를 등록하는 함수의 이름
refreshSigstring"$RefreshSig$"리프레시를 위한 서명을 생성하는 함수의 이름
emitFullSignaturesbooleanfalse더 나은 디버깅을 위해 완전한 서명을 출력할지 여부

© 2026 VoidZero Inc. 및 Oxc 기여자.