tsx ts란 차이 다른점

tsx ts란? 차이, 다른점

 

✅ .tsx

.tsx 파일이며 해당 파일은 JSX를 담고 있다.

여기서 JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법을 말한다

우리가 리액트에서 개발할 때 사용하는 문법이다. 공식적인 자바스크립트의 문법은 아니다.

브라우저에서 실행하기 전에 바벨을 사용하여 우리가 아는 일반 자바스크립트 형태의 코드로 변환된다.

여기서 바벨(babel)은 자바스크립트 컴파일러라고 표현이 가능하며, 쉽게 말해서 우리의 코드를 기계어로 변환해준다

 

✅ .ts

.ts는 pure TypeScript이며 해당 파일은 리액트에서 컴포넌트가 아닌 순수하게 타입스크립트 코드만 가지고 있다.

 

👉 참고

리액트에서 XML문법이 없으면 확장자를 .ts로 혹은 .tsx로 해도 오류가 없지만, XML문법이 있다고 하면 해당 파일의 확장자가 .ts일 경우에는 오류를 마주할 수 있다.