Question

.ts, .tsx 차이점

Answer 1

.ts와 .tsx 파일은 둘 다 TypeScript 파일이지만, 중요한 차이점이 있습니다. 주된 차이점은 JSX의 사용 가능 여부에 있습니다.

1. .ts (TypeScript)

• 설명: .ts 파일은 순수한 TypeScript 파일로, JSX 문법을 포함할 수 없습니다.
• 용도: 일반적인 TypeScript 코드 작성에 사용됩니다. React와 같은 라이브러리를 사용하지 않고, 순수한 TypeScript로만 작성된 로직, 유틸리티 함수, 서버 코드 등에 주로 사용됩니다.
• 예시:

  function add(a: number, b: number): number {
    return a + b;
  }
  

2. .tsx (TypeScript + JSX)

• 설명: .tsx 파일은 JSX(JavaScript XML)를 사용할 수 있는 TypeScript 파일입니다. 주로 React 컴포넌트를 만들 때 사용됩니다.
• 용도: TypeScript를 사용하면서 JSX 문법을 필요로 하는 경우, 주로 React 프로젝트에서 UI 컴포넌트를 작성할 때 사용됩니다. .tsx 파일을 사용하면 TypeScript로 작성된 코드 내에서 JSX 문법을 사용할 수 있습니다.

• 예시:

  import React from 'react';
  
  interface ButtonProps {
    label: string;
  }
  
  const Button: React.FC<ButtonProps> = ({ label }) => {
    return <button>{label}</button>;
  };
  
  export default Button;
  

차이점 정리

파일 확장자	JSX 사용 가능	주된 사용처	용도
.ts	불가능	일반 TypeScript 파일	순수 TypeScript 코드 작성
.tsx	가능	React 프로젝트에서 컴포넌트 작성	TypeScript와 JSX를 함께 사용하는 경우

언제 .ts vs .tsx를 사용할까요?

• .ts: 순수 TypeScript로만 작성된 로직, 함수, API 등의 코드를 작성할 때 사용됩니다. React와 관련된 UI 컴포넌트가 아닌 경우에는 .ts 파일을 사용하면 됩니다.
• .tsx: React와 같은 라이브러리에서 JSX를 사용해야 할 때, 즉 UI 컴포넌트를 만들거나 JSX 문법을 사용하는 경우에 .tsx 파일을 사용해야 합니다.

React와 같은 UI 프레임워크를 사용하지 않는 프로젝트에서는 .ts만으로 충분하지만, React 프로젝트에서 UI 컴포넌트를 작성할 때는 .tsx를 사용하는 것이 적절합니다.