TSX vs TS

리액트에서 UI를 표현할 때 쓰는 문법
JSX는 일반적인 JavaScript 코드를 포함
- 함수, 변수, 제어문 및 객체와 같은 자바스크립트의 모든 구성 요소를 사용하여 구성된 파일임.
- JS 파일로도 React에서 UI를 구현하는 데 사용될 수 있으나 JSX 파일이 더 일반적으로 사용된다.
- 브라우저 실행 전 코드 번들링 과정에서 바벨을 사용해 자바스크립트 형태의 코드로 변환 됨
공식 자바스크립트 문법은 아니지만, 가독성이 높고 이해하기 쉬운 리액트만의 특별한 스크립트 문법이라고 할 수 있다.
어차피 리액트로 작성한 코드들은 자바스크립트로 변환된다구 함. ⇒ 컴포넌트 파일을 만들어 사용하는 리액트 코드는 .jsx로 나머지는 .js로 만들기!
장점
- 보기 쉽고 익숙하며!
  - 기존 작성하던 HTML과 아주아주 유사
- 활용도가 높다!

⇒ 그러나? 기능적인 차이는 없고… 컴포넌트용 파일임을 표시하기 위해 사용한다고 함. 팀 내 컨벤션 요소 중 하나일 듯.

왜 궁금했냐면…

타입스크립트 작업 첫 술 뜰 때 마주한 친구

구글링 해서 해결 방법을 찾아보니

.ts 확장자를 .tsx로 변경해서 해결!

💬 TS는 대개 .ts 파일 확장자를 사용한다.

TSX (TypeScript with JSX): TSX는 React에서 UI를 작성하는 데 사용되는 TypeScript이다. React에서 JSX를 사용하는 경우 일반적으로 TSX 파일 확장자를 사용한다