걸음마부터 달리기
메모 본문
개발 지식 - Typescript, .ts와 .tsx의 차이점은?
타입스크립트를 사용하게 되면 이전과는 달리 파일의 확장자를 js, jsx에서 ts, tsx로 바꾸어 사용하게 된다.분명 확장자는 다른데, 어떤 확장자를 사용해도 별 차이점을 느낄 수가 없다. 그렇다면
velog.io
현재 진행중인 코드를 보면 tsx 확장자를 쓰는 것이 보인다. 타입스크립트로 React를 사용하고 있을때 단순 타입스크립트 확장자 ts가 아닌 tsx를 쓰는것은 JavaScript XML에 이유가 있다.
HTML은 HTML일 뿐이고 JS는 JS일 뿐이다. JS로 웹페이지 상에서 HTML을 동작하기 위해서는 브라우저의 DOM API를 이용하고 그것은 위와 같이 트리구조로 나타내어 진다.
따라서 우리는 하나의 확장자 안에서 다른 언어를 사용할 수 없다는 것을 기초로 한다. 즉 확장자가 .html이면 JS 사용이 불가하고 반대도 마찬가지이다. 그러하여 JS안에서 특정 메서드들로 HTML 태그들을 DOM API를 통하여 가져와 조작하였다.
이런것들이 있다...
하지만 JS안에서 태그들을 사용할 수 있으면 얼마나 편하겠는가? 그것이 바로 JS XML인 JSX 이다.
따라서 JS/TS 라이브러리인 React 안에서 태그들로 쉽게 UI를 구성하기 위해서는 tsx 확장자가 필수이다.