tsconfig.json "jsx": "react-jsx" 이 옵션 뭘까

[KingNono1030]

    "jsx": "react-jsx",

TypeScript JSX 변환 설정에 따른 Webpack과 Jest 설정

TypeScript의 jsx 옵션 설정은 JSX 변환 방식에 큰 영향을 미칩니다. Jest와 Webpack을 사용하는 프로젝트에서는 어떤 설정이 적합한지 이해하고 이를 적용하는 것이 중요합니다.

1. JSX 변환 옵션의 종류

"jsx": "react-jsx"

• 설명: TypeScript가 JSX를 React의 새로운 JSX 변환을 사용해 변환하도록 지정합니다.
• 장점:
  • TypeScript가 JSX 코드를 JavaScript로 변환할 때 React를 자동으로 import하지 않아도 됩니다.
  • Jest 테스트 환경에서 JSX 구문을 직접 변환하여 테스트가 원활하게 실행됩니다.
• 추천 사용 상황:
  • Jest와 같은 테스트 환경에서 TypeScript가 JSX를 직접 변환하는 것이 필요할 때.
  • Webpack에서 Babel 없이 TypeScript가 JSX를 변환하도록 할 때.

"jsx": "preserve"

• 설명: TypeScript가 JSX 구문을 JavaScript로 변환하지 않고 그대로 유지합니다. 이 설정은 Babel이나 다른 빌드 도구가 JSX를 최종적으로 변환할 것을 의도합니다.
• 장점:
  • Webpack이 Babel과 함께 JSX를 최종적으로 변환하므로, TypeScript는 순수 타입 검사에 집중할 수 있습니다.
• 추천 사용 상황:
  • Webpack을 통해 Babel을 사용하여 JSX 구문을 변환하는 경우.
  • 빌드 도구에서 JSX 변환이 이루어지도록 설정할 때.

---

2. 설정 예시

Jest 테스트 환경에서의 설정

Jest 테스트 환경에서는 "jsx": "react-jsx"를 사용하는 것이 일반적입니다. 이를 통해 TypeScript가 직접 JSX를 변환하므로, Jest가 JSX 구문을 이해할 수 있습니다.

Webpack 빌드 환경에서의 설정

1. Babel을 통해 JSX 변환하는 경우 ("jsx": "preserve")

   • TypeScript가 JSX를 그대로 유지하고, Webpack이 Babel을 통해 JSX를 변환하도록 합니다.
   • tsconfig.json 설정:

     {
       "compilerOptions": {
         "jsx": "preserve"
       }
     }

   • webpack.config.js 설정:

     module.exports = {
       module: {
         rules: [
           {
             test: /\.(js|jsx|ts|tsx)$/,
             exclude: /node_modules/,
             use: {
               loader: "babel-loader",
               options: {
                 presets: [
                   "@babel/preset-env",
                   "@babel/preset-react",
                   "@babel/preset-typescript"
                 ]
               }
             }
           }
         ]
       }
     };

2. TypeScript가 JSX를 직접 변환하는 경우 ("jsx": "react-jsx")

   • TypeScript가 직접 JSX를 JavaScript로 변환하며, 새로운 React 자동 import 기능을 사용할 수 있습니다.
   • tsconfig.json 설정:

     {
       "compilerOptions": {
         "jsx": "react-jsx"
       }
     }

---

3. 요약

• 테스트 환경 (Jest): "jsx": "react-jsx"를 사용하는 것이 권장됩니다.
• Webpack 빌드 환경:
  • Babel을 통해 JSX를 변환할 경우: "jsx": "preserve" + Babel 설정
  • TypeScript가 JSX를 변환할 경우: "jsx": "react-jsx"