TSX가 뭐야 — JSX에 안전벨트(타입)를 더한 파일

TSX는 JSX(화면 문법)에 타입스크립트의 타입 규칙까지 더한 파일이고, 확장자는 .tsx입니다.

2026년 7월 기준으로, AI에게 React 코드를 짜달라고 하면 .jsx 대신 .tsx 파일을 주는 경우가 부쩍 늘었습니다.

이 글을 읽으면 .tsx가 뭔지, .jsx·.ts와 뭐가 다른지, 언제 어떤 걸 쓰면 되는지 한 번에 정리됩니다.

한 줄 요약: .tsx는 .jsx에 "안전벨트"인 타입을 더한 파일입니다. 화면을 만드는 방식은 같지만, 실수를 실행 전에 미리 잡아주는 규칙이 붙어 있습니다.

TSX가 뭐야? — JSX에 타입을 더한 것

먼저 두 조각을 나눠서 보면 쉽습니다.

JSX는 자바스크립트 안에서 <div> 같은 HTML 비슷한 문법을 쓰게 해주는 문법입니다.

쉽게 말해 코드와 화면을 한 파일에 같이 쓰는 방식이고, 주로 React에서 씁니다.

타입스크립트(TS)는 자바스크립트에 "타입"이라는 규칙을 더한 언어입니다.

타입은 "이 값은 숫자다, 저 값은 글자다"처럼 값의 종류를 미리 정해두는 안전벨트라고 보면 됩니다.

TSX는 이 둘을 합친 것입니다.

즉 JSX(화면 문법)로 부품을 만들되, 거기에 타입까지 붙일 수 있는 파일이 .tsx입니다.

개인적으로는 "안전벨트를 더한 JSX"라는 한 줄만 기억해도 충분하다고 봅니다.

.jsx와 .tsx는 뭐가 다를까?

둘 다 화면을 만드는 파일이라는 점은 똑같습니다.

차이는 딱 하나, 타입을 줄 수 있느냐입니다.

.jsx는 타입 없이 자유롭게 쓰는 손글씨에 가깝습니다.

.tsx는 칸이 정해진 서식처럼, 값의 종류를 어긋나게 쓰면 실행 전에 빨간 줄로 알려줍니다.

구분	.jsx	.tsx
담긴 것	JS + JSX	TS + JSX
타입(안전벨트)	없음	있음
실수 잡는 시점	실행하고 나서	실행하기 전

JSX와 .jsx의 기본이 아직 낯설다면, 앞서 다룬 JSX 글과 JS·타입스크립트 차이 글을 먼저 읽고 오면 이 글이 훨씬 쉽게 들어옵니다.

.ts와 .tsx는 언제 갈릴까?

여기서 초보가 자주 헷갈리는 지점이 하나 있습니다.

.ts와 .tsx는 둘 다 타입스크립트 파일인데, 화면 문법(JSX)을 쓸 수 있느냐가 다릅니다.

TypeScript 공식 문서 기준으로, JSX 문법은 .tsx 파일에서만 쓸 수 있고 .ts에서는 못 씁니다.

그래서 기준은 간단합니다.

화면(컴포넌트)을 만드는 파일이면 .tsx, 화면과 상관없는 계산·데이터 처리 로직만 있으면 .ts를 씁니다.

버튼·카드 같은 화면 부품  →  .tsx
날짜 계산·데이터 정리 함수  →  .ts

그래서 언제 뭘 쓰면 될까?

결론부터 말하면, 정답은 프로젝트 크기와 취향에 달려 있습니다.

혼자 빠르게 만드는 작은 프로젝트나 연습용이면 .jsx로 가볍게 시작해도 됩니다.

여럿이 오래 다루거나 실수를 미리 막고 싶으면 .tsx가 유리합니다.

타입이라는 안전벨트가 있으면, "글자를 넣어야 할 자리에 숫자를 넣는" 흔한 실수를 실행 전에 걸러주기 때문입니다.

AI로 코딩하는데 이게 왜 중요할까?

AI에게 React 코드를 부탁하면 요즘은 .tsx로 주는 경우가 많습니다.

타입이 붙어 있으면 AI도, 사람도 코드가 어떻게 동작하는지 더 정확하게 파악할 수 있기 때문입니다.

그래서 AI가 준 코드에 파란 글씨로 타입이 붙어 있어도 당황할 필요는 없습니다.

화면 부품이면 .tsx, 순수 로직이면 .ts로 갈린다는 것만 알면 파일 확장자만 보고도 이 코드가 뭘 하는 건지 감을 잡을 수 있습니다.

개인적으로는 AI와 함께 코딩할수록 타입이 붙은 .tsx가 더 편해진다고 느낍니다.

자주 묻는 질문

.jsx로 짠 코드를 .tsx로 바꿔도 되나요?

네, 확장자를 .tsx로 바꾸면 됩니다.

다만 그 순간부터 타입 규칙이 적용되므로, 처음에는 타입이 안 맞는다는 경고가 몇 개 뜰 수 있습니다.

이 경고를 하나씩 맞춰가는 과정이 곧 코드를 더 안전하게 다듬는 과정입니다.

초보인데 처음부터 .tsx로 배워야 하나요?

꼭 그럴 필요는 없습니다.

화면이 어떻게 그려지는지 먼저 .jsx로 익히고, 익숙해진 다음 타입을 얹는 순서도 좋습니다.

다만 실무는 대부분 .tsx를 쓰므로, 방향만 알아두면 나중에 넘어가기 수월합니다.

정리

TSX는 JSX에 타입이라는 안전벨트를 더한 .tsx 파일입니다.

.jsx와 화면 만드는 방식은 같지만, 실수를 실행 전에 잡아준다는 점이 다릅니다.

화면 부품은 .tsx, 순수 로직은 .ts로 갈린다는 것만 기억하면, AI가 준 코드를 볼 때도 훨씬 덜 헷갈립니다.

다음 편에서는 React·Vue·Next 같은 화면 조립 키트가 서로 뭐가 다른지 쉽게 풀어보겠습니다.

 

 

참고한 자료

TypeScript 공식 한국어 JSX 문서(typescriptlang.org)와 React 공식 TypeScript 안내(react.dev)를 참고했습니다. JSX·TSX 확장자 구분은 공식 문서 기준이며, 파일 확장자 정책은 프로젝트 설정에 따라 달라질 수 있습니다.