Bun 은 .jsx 및 .tsx 파일을 기본적으로 지원합니다. Bun 의 내부 트랜스파일러는 실행 전에 JSX 구문을 바닐라 JavaScript 로 변환합니다.
function Component(props: {message: string}) {
return (
<body>
<h1 style={{color: 'red'}}>{props.message}</h1>
</body>
);
}
console.log(<Component message="Hello world!" />);설정
Bun 은 tsconfig.json 또는 jsconfig.json 설정 파일을 읽어 내부적으로 JSX 변환을 수행하는 방법을 결정합니다. 이 중 어느 것도 사용하지 않으려면 다음 옵션을 bunfig.toml 에서 정의할 수도 있습니다.
다음 컴파일러 옵션이 적용됩니다.
jsx
JSX 구성 요소가 내부적으로 바닐라 JavaScript 로 어떻게 변환되는지 결정합니다. 아래 표는 jsx 의 가능한 값과 다음과 같은 간단한 JSX 구성 요소의 트랜스파일레이션을 나열합니다.
<Box width={5}>Hello</Box>| 컴파일러 옵션 | 트랜스파일된 출력 |
|---|---|
json<br/>{<br/> "jsx": "react"<br/>}<br/> | tsx<br/>import { createElement } from "react";<br/>createElement("Box", { width: 5 }, "Hello");<br/> |
json<br/>{<br/> "jsx": "react-jsx"<br/>}<br/> | tsx<br/>import { jsx } from "react/jsx-runtime";<br/>jsx("Box", { width: 5 }, "Hello");<br/> |
json<br/>{<br/> "jsx": "react-jsxdev"<br/>}<br/> | tsx<br/>import { jsxDEV } from "react/jsx-dev-runtime";<br/>jsxDEV(<br/> "Box",<br/> { width: 5, children: "Hello" },<br/> undefined,<br/> false,<br/> undefined,<br/> this,<br/>);<br/>jsxDEV 변수 이름은 React 에서 사용하는 규칙입니다. DEV 접미사는 코드가 개발용으로 의도되었음을 나타내는 가시적인 방법입니다. React 의 개발 버전은 더 느리며 추가적인 유효성 검사 및 디버깅 도구를 포함합니다. |
json<br/>{<br/> "jsx": "preserve"<br/>}<br/> | tsx<br/>// JSX 는 트랜스파일되지 않음<br/>// "preserve" 는 현재 Bun 에서 지원되지 않음<br/><Box width={5}>Hello</Box><br/> |
jsxFactory
NOTE
**참고** — `jsx` 가 `react` 일 때만 적용됩니다.JSX 구성 요소를 나타내는 데 사용되는 함수 이름입니다. 기본값은 "createElement" 입니다. 이는 다른 함수 이름 ("h") 을 사용하는 Preact 와 같은 라이브러리에 유용합니다.
| 컴파일러 옵션 | 트랜스파일된 출력 |
|---|---|
json<br/>{<br/> "jsx": "react",<br/> "jsxFactory": "h"<br/>}<br/> | tsx<br/>import { h } from "react";<br/>h("Box", { width: 5 }, "Hello");<br/> |
jsxFragmentFactory
NOTE
**참고** — `jsx` 가 `react` 일 때만 적용됩니다.<>Hello</> 와 같은 JSX 프래그먼트 를 나타내는 데 사용되는 함수 이름입니다. jsx 가 react 일 때만 적용됩니다. 기본값은 "Fragment" 입니다.
| 컴파일러 옵션 | 트랜스파일된 출력 |
|---|---|
json<br/>{<br/> "jsx": "react",<br/> "jsxFactory": "myjsx",<br/> "jsxFragmentFactory": "MyFragment"<br/>}<br/> | tsx<br/>// 입력<br/><>Hello</>;<br/><br/>// 출력<br/>import { myjsx, MyFragment } from "react";<br/>myjsx(MyFragment, null, "Hello");<br/> |
jsxImportSource
NOTE
**참고** — `jsx` 가 `react-jsx` 또는 `react-jsxdev` 일 때만 적용됩니다.컴포넌트 팩토리 함수 (createElement, jsx, jsxDEV 등) 를 임포트할 모듈입니다. 기본값은 "react" 입니다. 이는 일반적으로 Preact 와 같은 컴포넌트 라이브러리를 사용할 때 필요합니다.
| 컴파일러 옵션 | 트랜스파일된 출력 |
|---|---|
jsonc<br/>{<br/> "jsx": "react",<br/> // jsxImportSource 가 정의되지 않음<br/> // "react" 로 기본값 설정<br/>}<br/> | tsx<br/>import { jsx } from "react/jsx-runtime";<br/>jsx("Box", { width: 5, children: "Hello" });<br/> |
jsonc<br/>{<br/> "jsx": "react-jsx",<br/> "jsxImportSource": "preact",<br/>}<br/> | tsx<br/>import { jsx } from "preact/jsx-runtime";<br/>jsx("Box", { width: 5, children: "Hello" });<br/> |
jsonc<br/>{<br/> "jsx": "react-jsxdev",<br/> "jsxImportSource": "preact",<br/>}<br/> | tsx<br/>// /jsx-runtime 가 자동으로 추가됨<br/>import { jsxDEV } from "preact/jsx-dev-runtime";<br/>jsxDEV(<br/> "Box",<br/> { width: 5, children: "Hello" },<br/> undefined,<br/> false,<br/> undefined,<br/> this,<br/>);<br/> |
JSX 프래그마
이러한 값은 모두 프래그마 를 사용하여 파일별로 설정할 수 있습니다. 프래그마는 특정 파일에서 컴파일러 옵션을 설정하는 특별한 주석입니다.
| 프래그마 | 동일한 설정 |
|---|---|
ts<br/>// @jsx h<br/> | jsonc<br/>{<br/> "jsxFactory": "h",<br/>}<br/> |
ts<br/>// @jsxFrag MyFragment<br/> | jsonc<br/>{<br/> "jsxFragmentFactory": "MyFragment",<br/>}<br/> |
ts<br/>// @jsxImportSource preact<br/> | jsonc<br/>{<br/> "jsxImportSource": "preact",<br/>}<br/> |
로깅
Bun 은 디버깅을 더 쉽게 만들기 위해 JSX 를 위한 특별한 로깅을 구현합니다. 다음 파일이 주어지면:
import { Stack, UserCard } from "./components";
console.log(
<Stack>
<UserCard name="Dom" bio="Street racer and Corona lover" />
<UserCard name="Jakob" bio="Super spy and Dom's secret brother" />
</Stack>,
);Bun 은 로깅될 때 컴포넌트 트리를 예쁘게 출력합니다.
프롭 펀닝 (Prop Punning)
Bun 런타임은 JSX 에 대한 "프롭 펀닝"도 지원합니다. 이는 동일한 이름의 프롭에 변수를 할당하는 데 유용한 단축 구문입니다.
function Div(props: {className: string;}) {
const {className} = props;
// 펀닝 없이
return <div className={className} />;
// 펀닝 사용
return <div {className} />;
}