.ts와 .tsx 파일 확장자의 주요 차이점

.ts와 .tsx 파일 확장자의 주요 차이점은 다음과 같습니다:

1. JSX 지원
   • .ts: JSX를 지원하지 않는 순수 TypeScript 파일입니다.
   • .tsx: JSX 구문을 포함할 수 있는 TypeScript 파일입니다.
2. 사용 목적
   • .ts: 일반적인 TypeScript 코드, 유틸리티 함수, 클래스, 인터페이스 등을 작성하는 데 사용됩니다.
   • .tsx: React 컴포넌트나 JSX를 포함하는 UI 관련 코드를 작성하는 데 주로 사용됩니다.
3. 컴파일 과정
   • .ts: TypeScript 컴파일러(tsc)로 직접 컴파일됩니다.
   • .tsx: JSX 변환 단계가 추가로 필요합니다.
4. 코드 예시
   
   • .ts 파일:
     

     function greet(name: string): string {
       return `Hello, ${name}!`;
     }

     
     
     
   • .tsx 파일:
     

     import React from 'react';
     
     const Greeting: React.FC<{ name: string }> = ({ name }) => {
       return <div>Hello, {name}!</div>;
     };

     
     
     
   
   
5. 사용 시기
   • .ts: 순수 로직, 유틸리티 함수, 타입 정의 등에 사용.
   • .tsx: React 컴포넌트나 JSX를 포함하는 파일에 사용.

요약하면, .ts는 순수 TypeScript 코드를 위한 것이고, .tsx는 JSX를 포함한 TypeScript 코드를 위한 것입니다. React 프로젝트에서는 주로 컴포넌트 파일에 .tsx를, 그 외의 로직이나 유틸리티 파일에 .ts를 사용하는 것이 일반적입니다.