개발 지식 - Typescript, .ts와 .tsx의 차이점은?

• 타입스크립트를 사용하면 파일 확장자를 js, jsx에서 ts, tsx로 변경하여 사용한다. 이는 JavaScript XML (JSX) 사용 여부에 따라 달라진다.

• JSX는 HTML과 유사한 구문을 사용하여 컴포넌트의 구조를 직관적으로 기술할 수 있게 해주는 역할을 한다. 이를 통해 개발의 편의성, 코드의 가독성과 유지보수의 효율성이 크게 향상된다.

• JSX를 사용하면 UI의 구조를 파악하기 쉽고, JavaScript 코드를 UI 구성 내부에 쉽게 통합할 수 있다. 이는 개발자가 직접 DOM 요소를 생성하고 조작하는 것보다 간결하고 직관적이다.

• JSX와 tsx에서는 JSX를 처리하기 위한 추가적인 변환 과정이 발생하므로, JSX를 사용하지 않는 파일에는 jsx나 tsx를 사용하지 않는 것이 좋다. 이렇게 하면 불필요한 작업을 줄이고 성능을 향상시킬 수 있다.