React Core 구현하기 - 1. JSX 컴파일

* 본 프로젝트는 Vite + VanilaJS로 생성되었으며, TypeScript를 사용합니다.

* 분량조절을 위해 타이핑 관련 코드작성은 생략합니다.

사용된 패키지

@babel/core: Babel이 동작하기 위한 엔진

@babel/cli: Babel을 커맨드라인에서 사용할 수 있게함

@babel/plugin-transform-react-jsx: JSX를 JavaScript로 변환
@babel/preset-typescript: TypeScript를 JavaScript로 변환

 

JSX는 JavaScript의 확장 문법으로, HTML과 비슷한 구조를 사용해 웹 화면을 쉽게 구성할 수 있게 해줍니다.

그러나 JSX는 브라우저가 직접 이해할 수 없는 문법이므로, JavaScript로 변환하는 과정(트랜스파일)이 필요합니다. 

 

JSX 컴파일 환경 구축하기

JSX를 트랜스파일하기 위해서는 몇가지 설정이 선행되어야 합니다.

 

1. Babel

// babel.config.json
{
  "presets": ["@babel/preset-typescript"],
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
        "runtime": "automatic",  // React 17+의 자동 런타임 방식 적용
        "importSource": "@/utils/core"  // 커스텀 JSX 처리 함수 위치 지정
      }
    ]
  ]
}

• runtime: "automatic" 
  "automatic" 옵션은 React 17 이후의 컴파일 방식을 사용함을 뜻합니다.
  기존의 React.createElement 대신 jsx/jsxs 함수를 사용해 JSX를 변환합니다.
  이 방식은 import React from 'react'를 명시적으로 작성할 필요가 없어 코드가 더 간결해집니다.
• importSource: "@/utils/core" 
  JSX를 처리할 커스텀 함수의 위치를 지정합니다. 
  이 프로젝트에서는 JSX 트랜스파일 로직을 @/utils/core 폴더에 구현했기 때문에, 이 경로를 지정했습니다.
  Babel은 이 경로에서 JSX 처리 함수를 가져와 변환 작업을 수행합니다.

2. Vite

// vite.config.ts
export default defineConfig({
  esbuild: {
  // babel과 동일한 설정 적용
    jsx: 'automatic',
    jsxImportSource: '@/utils/core',
  },
})

• 개발환경에서 트랜스파일된 JSX 코드를 사용할 수 있게 합니다.
  Babel과 동일한 트랜스파일 결과물을 생성해야 하기 때문에, 바벨과 동일하게 설정합니다.

Typescript (optional)

// tsconfig.json
{
  "compilerOptions": {
    "jsx": "preserve",  // JSX 변환을 수행하지 않고 원본 구조 유지
  }
}

• jsx: "preserve"
  TypeScript도 트랜스파일을 진행하지만, Babel과 Vite가 JSX의 트랜스파일을 담당하기 때문에 여기서는 코드 원본을 유지하는 설정을 합니다.

Babel CLI를 통한 트랜스파일 결과 확인

JSX 코드를 작성해보고 바벨 트랜스파일 결과를 확인할 수 있습니다.

트랜스파일을 CLI로 실행하기 위해 @babel/cli 패키지를 설치했고,

package.json의 scripts에 트랜스파일 cli를 설정하여 결과물을 확인합니다.

"babel-build": "babel src --out-dir dist/babel --extensions \".tsx,.ts\""

// components/child.tsx: 트랜스파일 할 함수 컴포넌트 작성
export default function Child() {
  return (
    <div>
      <h1>Child</h1>
    </div>
  );
}

// 트랜스파일 cli 실행
$ npm run babel-build

// dist/babel/components/child.js: 트랜스파일 결과
import { jsx as _jsx } from "@/utils/core/jsx-runtime";
export default function Child() {
  return _jsx("div", {
    children: _jsx("h1", {
      children: "Child"
    })
  });
}

트랜스파일된 코드를 보면 jsx라는 함수를 import하여 사용하는 것을 확인할 수 있습니다.

이는 Babel에서 지정한 jsx 런타임 로직이며, 다음 글에서는 이 런타임 로직에 대해 다뤄보겠습니다.