TypeScript에서 .ts와 .tsx의 차이점

📌 TypeScript에서 .ts와 .tsx의 차이점: 어떤 걸 써야 할까요?

✅ TypeScript를 사용하다 보면 `.ts`와 `.tsx` 확장자를 보게 됩니다.

어떤 차이가 있는지, 언제 각각을 써야 하는지 궁금하셨다면 지금부터 자세히 알아보겠습니다! 😊

📌 .ts와 .tsx의 기본적인 차이점

🔹 `.ts`란?

- 일반적인 TypeScript 파일을 의미합니다.
- React가 아닌 프로젝트에서 사용됩니다.
- JSX 구문을 지원하지 않습니다.

🔹 `.tsx`란?

- JSX를 포함하는 TypeScript 파일입니다.
- React와 함께 사용됩니다.
- TypeScript가 JSX를 이해하도록 설정해야 합니다.

🧐 코드 예제로 비교해보기

✅ `.ts` 파일 예제 (일반 TypeScript)

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

console.log(greet("Alice"));
        

✅ `.tsx` 파일 예제 (React JSX 포함)

import React from "react";

const Greeting: React.FC<{ name: string }> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default Greeting;
        

🔍 차이점 한눈에 비교하기

확장자	JSX 지원 여부	주 사용 사례
`.ts`	❌ 불가능	일반적인 TypeScript 코드
`.tsx`	✅ 가능	React 컴포넌트 작성

💡 언제 `.ts`와 `.tsx`를 사용해야 할까요?

✔ 일반적인 TypeScript 코드 (예: API 요청, 데이터 처리) 👉 `.ts`
✔ React와 함께 사용할 경우 👉 `.tsx`
✔ JSX를 사용하지 않는다면 👉 `.ts`
✔ JSX를 사용해야 한다면 👉 `.tsx`

🎯 마무리

오늘은 `.ts`와 `.tsx`의 차이점을 알아봤어요!
TypeScript와 React를 함께 사용할 때는 `.tsx`를 활용하고,
일반적인 TypeScript 코드에서는 `.ts`를 사용하면 됩니다. 😊

📢 여러분은 주로 어떤 확장자를 사용하시나요? 댓글로 의견을 남겨주세요! 🚀