프론트엔드 개발에서 TypeScript는 많은 개발자들에게 사랑받는 언어입니다. JavaScript의 상위 집합으로, 정적 타입을 지원하여 코드의 안정성을 높이고 버그를 미리 예방할 수 있습니다.
하지만 TypeScript에는 두 가지 주요 파일 확장자인 TS와 TSX가 존재합니다. 이 두 확장자는 각각 어떤 용도로 사용되는지, 그리고 그 차이점은 무엇인지에 대해 자세히 알아보겠습니다.
TS와 TSX의 기본 개념
TypeScript에서 .ts 파일은 기본적으로 TypeScript 코드가 포함된 파일입니다. 여기에는 TypeScript의 모든 기능이 포함되며, JavaScript의 문법을 그대로 사용할 수 있습니다.
반면에 .tsx 파일은 TypeScript와 JSX 문법을 동시에 사용할 수 있는 파일입니다. 즉, React 컴포넌트를 작성할 때 주로 사용됩니다.
다음 표는 TS와 TSX의 기본 개념을 비교합니다.
| 파일 확장자 | 설명 | 사용 예시 |
|---|---|---|
.ts |
TypeScript 파일 | 일반 TypeScript 코드 |
.tsx |
TypeScript + JSX 파일 | React 컴포넌트 코드 |
TS 파일의 특징
TS 파일은 TypeScript의 모든 기능을 지원합니다. 이 파일에는 변수, 함수, 클래스 및 인터페이스 정의가 포함될 수 있습니다.
TS 파일에서는 JavaScript 문법을 그대로 사용할 수 있으며, TypeScript의 정적 타입 검사 기능을 통해 타입을 명확히 지정할 수 있습니다. 이러한 타입 지정 기능은 코드의 가독성을 높여주고, 실행 전에 오류를 발견하는 데 도움을 줍니다.
TS 파일의 예시
아래는 간단한 TS 파일의 예시입니다.
“`typescript
// person.ts
interface Person {
name: string;
age: number;
}
const person: Person = {
name: “홍길동”,
age: 30
};
console.log(person);
“`
위 예시에서 Person 인터페이스를 정의하고, 이 인터페이스를 사용하는 person 객체를 생성하였습니다. 이렇게 TS 파일을 사용하면 코드의 구조를 명확히 할 수 있어 유지보수와 협업에 매우 유리합니다.
TSX 파일의 특징
TSX 파일은 TypeScript와 JSX를 함께 사용할 수 있는 파일입니다. JSX는 JavaScript XML의 약자로, React에서 UI를 정의할 때 사용하는 문법입니다.
TSX 파일에서는 HTML과 같은 구문을 사용할 수 있으며, TypeScript의 타입 시스템도 그대로 적용됩니다. 따라서, TSX 파일은 주로 React 컴포넌트를 작성할 때 사용됩니다.
TSX 파일의 예시
아래는 간단한 TSX 파일의 예시입니다.
“`tsx
// App.tsx
import React from ‘react’;
interface Props {
name: string;
}
const Greeting: React.FC
return
안녕하세요, {name}님!
;
};
export default Greeting;
“`
위 예시에서 Greeting 컴포넌트를 정의하였으며, Props 인터페이스를 통해 name 속성의 타입을 지정하였습니다. 이렇게 TSX 파일을 사용하면 React의 강력한 기능을 TypeScript의 타입 검사와 결합하여 보다 안정적이고 효율적인 코드를 작성할 수 있습니다.
TS와 TSX의 사용 용도
TS와 TSX의 사용 용도는 각기 다릅니다. 기본적으로 TypeScript만 사용하는 경우에는 .ts 파일을 사용하고, React 컴포넌트를 작성하는 경우에는 .tsx 파일을 사용해야 합니다.
이는 두 파일의 문법적 차이와 관련이 있습니다.
TS 파일 사용 예
- 일반적인 TypeScript 프로젝트에서 비즈니스 로직, 데이터 모델 등을 정의할 때
- React와 관계없는 일반적인 JavaScript 코드와 TypeScript를 혼합하여 사용할 때
TSX 파일 사용 예
- React 프로젝트에서 컴포넌트를 작성할 때
- JSX 문법이 필요한 경우, 예를 들어, HTML과 같은 구문을 사용해야 할 때
다음 표는 각 파일의 사용 용도를 정리한 것입니다.
| 파일 확장자 | 사용 용도 |
|---|---|
.ts |
비즈니스 로직, 데이터 모델, 일반 TypeScript 코드 |
.tsx |
React 컴포넌트 작성, JSX 문법 사용 |
결론
TypeScript를 사용할 때, TS와 TSX 파일의 차이를 알고 적절히 사용하는 것이 매우 중요합니다. TS 파일은 TypeScript 코드 전반에 사용되며, TSX 파일은 React 컴포넌트를 작성하는 데 주로 사용됩니다.
이를 통해 개발자는 코드의 가독성과 안정성을 높일 수 있으며, 협업 시에도 보다 수월하게 작업할 수 있습니다. 따라서, TypeScript를 사용하여 프로젝트를 개발할 때, 각 파일의 용도와 특징을 알아보고 올바르게 활용하는 것이 필요합니다.
TypeScript와 React의 강력한 조합을 통해 보다 효율적이고 안정적인 웹 애플리케이션을 개발할 수 있기를 바랍니다.
