React JSX Transform 실전 가이드

// 모든 빌드 도구가 처리해야 하는 JSX
function App() {
  return <div>Hello World</div>;
}

// .babelrc.json
{
  "presets": [
    ["@babel/preset-react", {
      "runtime": "automatic",
      "importSource": "react"
    }]
  ]
}

{
  "presets": [
    ["@babel/preset-react", {
      // "automatic" | "classic"
      "runtime": "automatic",
      
      // JSX runtime을 import할 패키지 (기본값: "react")
      "importSource": "react", 
      
      // development 모드 설정 (true 시 __source, __self prop 추가)
      "development": process.env.NODE_ENV === "development",
      
      // React.createElement 함수명 (classic 모드 전용)
      "pragma": "React.createElement",
      
      // React.Fragment 함수명 (classic 모드 전용)  
      "pragmaFrag": "React.Fragment",
      
      // XML 네임스페이스 문법 사용 시 에러 발생 (React 미지원)
      "throwIfNamespace": true
    }]
  ]
}

{
  "compilerOptions": {
    // "preserve": JSX를 변환하지 않고 그대로 둡니다.
    //             Babel, SWC 등 다른 트랜스파일러가 JSX를 처리할 때 사용합니다.
    //             가장 흔하고 권장되는 설정 중 하나입니다.
    "jsx": "preserve",
 
    // "react-jsx": Automatic Runtime을 사용하여 JSX를 변환합니다. (프로덕션용)
    // "react-jsxdev": Automatic Runtime을 사용하며, 디버깅을 위한
    //                 __source, __self prop을 추가합니다. (개발용)
    "jsx": "react-jsxdev",
    
    // Automatic Runtime 사용 시, JSX 함수를 가져올 소스를 지정합니다.
    // (예: "preact", "@emotion/react" 등)
    "jsxImportSource": "react"
  }
}

# automatic runtime
esbuild app.jsx --jsx=automatic --jsx-import-source=react
 
# classic runtime  
esbuild app.jsx --jsx=transform --jsx-factory=React.createElement

// build.js
require('esbuild').build({
  entryPoints: ['app.jsx'],
  bundle: true,
  outfile: 'out.js',
  jsx: 'automatic',
  jsxImportSource: 'react',
});

{
  "jsc": {
    "parser": { "syntax": "typescript", "jsx": true },
    "transform": {
      "react": {
        "runtime": "automatic",
        "importSource": "react",
        // true 시 React Refresh 자동 활성화 및 개발 정보 주입
        "refresh": process.env.NODE_ENV === "development"
      }
    }
  }
}

// next.config.js
module.exports = {
  compiler: {
    // Emotion.js 최적화를 위한 내장 기능 (권장)
    emotion: {
      sourceMap: true,
      autoLabel: 'dev-only',
      importSource: '@emotion/react'
    }
  },
  // 그 외 커스텀 WASM 플러그인 사용 시 (실험적 기능)
  experimental: {
    swcPlugins: [
      ['my-custom-swc-plugin', { /* plugin options */ }]
    ]
  }
};

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
 
export default defineConfig({
  plugins: [
    react({
      jsxRuntime: 'automatic', // 'classic'
      jsxImportSource: 'react', // 기본값
      // 필요 시 Babel 플러그인 체인 추가 가능
      babel: {
        plugins: ['@emotion/babel-plugin']
      }
    })
  ]
});

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'swc-loader',
          options: {
            jsc: {
              transform: {
                react: {
                  runtime: 'automatic',
                  importSource: 'react'
                }
              }
            }
          }
        }
      }
    ]
  }
};

# 1. React 버전 업그레이드
npm update react react-dom
 
# 2. react-scripts 업데이트 (5.0+는 automatic 기본)
npm update react-scripts
 
# 3. ESLint 설정 수정

// .eslintrc.json
{
  "extends": ["react-app"],
  "rules": {
    "react/react-in-jsx-scope": "off"
  }
}

// 1단계: 빌드 설정은 classic 유지
{
  "presets": [
    ["@babel/preset-react", {
      "runtime": "classic"
    }]
  ]
}
 
// 2단계: 파일별로 automatic 전환
/** @jsxRuntime automatic */
// 이 파일만 automatic 사용
 
// 3단계: 전체 전환
{
  "runtime": "automatic"
}

// packages/shared/.babelrc.json
{
  "presets": [
    ["@babel/preset-react", {
      "runtime": "automatic",
      "importSource": "@emotion/react" // 공통 스타일링
    }]
  ]
}
 
// packages/app-a/.babelrc.json
{
  "extends": "../shared/.babelrc.json",
  "presets": [
    ["@babel/preset-react", {
      "runtime": "automatic",
      "importSource": "react" // 기본 React
    }]
  ]
}

Error: Automatic JSX runtime requires importing 'jsx' from 'react/jsx-runtime'
but 'React' is already in scope

// 잘못된 코드
import React from 'react'; // automatic에서는 불필요
 
// 올바른 코드
// import 제거하거나
import { useState } from 'react'; // 필요한 것만 import

Module not found: Can't resolve 'react/jsx-runtime'

# React 버전 확인 (17+ 필요)
npm list react
 
# 업데이트
npm update react react-dom

// JSX element type 'Element' is not a constructor function for JSX elements

// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "types": ["react", "react-dom"]
  }
}

// 측정 스크립트
const { execSync } = require('child_process');
 
const configs = [
  { name: 'Babel Classic', cmd: 'babel src --jsx-runtime classic' },
  { name: 'Babel Automatic', cmd: 'babel src --jsx-runtime automatic' },
  { name: 'esbuild', cmd: 'esbuild src/**/*.jsx --jsx=automatic' },
  { name: 'SWC', cmd: 'swc src -d dist' }
];
 
configs.forEach(({ name, cmd }) => {
  console.time(name);
  execSync(cmd);
  console.timeEnd(name);
});

// webpack-bundle-analyzer로 분석
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      reportFilename: 'bundle-report.html'
    })
  ]
};

// 모든 도구가 지향하는 미래
function App() {
  return <div>Simple, Clean, Efficient</div>;
}