.ts 와 .tsx 의 차이

언제 파일뒤 확장자에 .ts를 쓰고 언제 .tsx를 써야할까?

 

jsx를 쓰면  .tsx  

jsx를 안쓰면 .ts

 

 

 

 

✅ .ts vs .tsx 사용 기준표

사용 예시 JSX 사용 여부 추천 확장자 설명

✅ 유틸 함수 (formatDate, calculateTax)	❌ 없음	.ts	UI와 무관한 일반 로직
✅ 타입 정의 (types.ts, user.types.ts)	❌ 없음	.ts	인터페이스, 타입 등만 포함
✅ API 요청 (api.ts, useAxios.ts)	❌ 없음	.ts	fetch, axios 등 비동기 로직
✅ 커스텀 훅 (useAuth, useModal)	❌ 없음	.ts	훅 내부에서 JSX를 리턴하지 않으면 .ts
✅ React 컴포넌트 (Header, ProductCard)	✅ 있음	.tsx	JSX 포함 시 반드시 .tsx
✅ 페이지 컴포넌트 (Home, About)	✅ 있음	.tsx	라우팅 대상 React 컴포넌트
✅ Context Provider (ThemeProvider, AuthProvider)	✅ 있음	.tsx	JSX로 children 렌더링 시
❗ JSX는 없지만 import React만 있는 경우	❌ 없음	.ts	단, JSX를 리턴하지 않으면 .ts 유지 가능

---

🧩 예시 폴더 구조 기준 추천

src/
├── components/         # 모두 .tsx (컴포넌트니까 JSX 포함)
│   └── Button.tsx
├── hooks/              # 대부분 .ts (JSX 없음)
│   └── useCart.ts
├── pages/              # 라우팅 대상, JSX 포함 → .tsx
│   └── Home.tsx
├── types/              # 타입 정의만 → .ts
│   └── product.types.ts
├── utils/              # 계산, 포맷, 필터 등 → .ts
│   └── formatPrice.ts
├── App.tsx             # JSX 포함 → .tsx
└── main.tsx            # JSX 포함 → .tsx

---

💡 기억 포인트

• ✔ JSX를 "쓰면" .tsx
• ✔ JSX를 "안 쓰면" .ts
• ❌ JSX를 쓰는 데 .ts로 만들면 컴파일 오류가 남.

---