TS vs TSX 간단하게 이해하는 차이점

TypeScript는 자바스크립트의 상위 집합으로, 정적 타입을 제공하여 개발자가 코드의 품질을 향상시키고 버그를 줄일 수 있도록 도와줍니다. 특히, React와 같은 프레임워크와 함께 사용할 때 그 효과는 더욱 두드러집니다.

여기서는 TypeScript의 두 가지 파일 확장자, 즉 `.ts`와 `.tsx`의 차이를 명확하게 알아보겠습니다.

TS와 TSX의 기본 개념

TypeScript의 파일 확장자는 두 가지로 나뉩니다. .ts와 .tsx. 이 두 가지는 사용 목적에 따라 구분되며, 각각의 특성과 사용 사례를 알아보는 것이 필요합니다.

이 섹션에서는 각 파일 확장자의 기본 개념을 살펴보겠습니다.

TS 파일

.ts 파일은 TypeScript의 기본 파일 형식입니다. 이 파일은 주로 일반적인 TypeScript 코드가 포함되어 있으며, React와 같은 프레임워크 없이 순수한 TypeScript로 작성된 코드를 포함합니다.

일반적으로 로직, 데이터 모델 및 함수 등의 정의가 포함되며, 이러한 코드는 자바스크립트로 컴파일되어 웹 애플리케이션의 동작을 지원합니다.

특징	설명
파일 확장자	.ts
사용 목적	일반 TypeScript 코드
포함 내용	로직, 데이터 모델, 함수 정의 등
프레임워크	React와 같은 프레임워크 없이 사용 가능

TSX 파일

반면에 .tsx 파일은 TypeScript를 사용하여 React 컴포넌트를 작성할 때 사용하는 파일 형식입니다. 이 파일에는 JSX 문법이 포함되어 있으며, 이는 JavaScript와 XML의 조합으로, React 컴포넌트를 정의하는 데 매우 유용합니다.

JSX는 HTML과 유사한 구문을 사용하여 UI를 선언적으로 작성할 수 있도록 해 줍니다. 따라서 React의 강력한 기능을 활용하고자 할 때 .tsx 파일을 사용하는 것이 적합합니다.

특징	설명
파일 확장자	.tsx
사용 목적	React 컴포넌트 작성
포함 내용	JSX 문법을 포함한 TypeScript 코드
프레임워크	React 전용 사용

TS와 TSX의 사용 사례

이제 TS와 TSX의 기본 개념을 이해했으니, 각각의 사용 사례에 대해 자세히 알아보겠습니다. 상황에 따라 어떤 파일 형식을 선택해야 할지에 대한 기준을 제시합니다.

TS 파일 사용 사례

.ts 파일은 주로 다음과 같은 경우에 사용됩니다.

1. 비즈니스 로직: 데이터 처리, API 호출, 알고리즘 구현 등과 같은 비즈니스 로직을 작성할 때 사용합니다. 이 때는 JSX 문법이 필요하지 않기 때문에 .ts 파일로 작성합니다.
2. 유틸리티 함수: 애플리케이션 전반에서 재사용할 수 있는 유틸리티 함수를 작성할 때 유용합니다. 함수는 명확하게 정의되고, 정적 타입을 통해 안전성을 확보할 수 있습니다.
3. 타입 정의: TypeScript는 강력한 타입 시스템을 제공하므로, 인터페이스나 타입별칭을 정의하여 다른 파일에서 사용할 수 있습니다.

사용 사례	설명
비즈니스 로직	데이터 처리 및 알고리즘 구현 등을 위한 코드
유틸리티 함수	재사용 가능한 함수 정의
타입 정의	인터페이스 및 타입별칭 정의

TSX 파일 사용 사례

반면에 .tsx 파일은 다음과 같은 경우에 사용됩니다.

1. React 컴포넌트: React로 UI를 구성할 때 주로 사용됩니다. JSX 문법을 통해 HTML과 유사한 구문으로 UI를 선언적으로 작성할 수 있습니다.
2. 상태 관리: React의 state와 props를 다루면서 UI를 동적으로 업데이트해야 할 때 사용합니다. 이 때 TypeScript의 정적 타입을 통해 컴포넌트의 props와 state에 대한 타입 검사를 수행할 수 있습니다.
3. 이벤트 처리: 사용자 상호작용에 대한 이벤트를 처리하는 로직을 작성할 때 .tsx 파일을 사용하여, UI와 기능을 함께 관리합니다.

사용 사례	설명
React 컴포넌트	UI 구성 및 JSX 문법 사용
상태 관리	state 및 props와 관련된 코드 작성
이벤트 처리	사용자 상호작용에 대한 이벤트 처리 로직

다른 내용도 보러가기 #1

TS와 TSX의 결론

TypeScript를 사용할 때, .ts와 .tsx 파일은 각각의 역할과 목적이 다릅니다. TypeScript의 강력한 정적 타입 시스템을 활용하여 코드의 품질을 높이고, React와 함께 사용할 때는 .tsx 파일을 통해 UI를 효과적으로 구성할 수 있습니다.

따라서 개발하는 애플리케이션의 요구 사항에 따라 적절한 파일 형식을 선택하는 것이 필요합니다. 이렇게 TS와 TSX의 차이를 알아보고 활용하면, 개발 과정에서 더 효율적이고 안전한 코드를 작성할 수 있습니다.

각 파일의 목적과 사용 사례를 명확히 파악하고, 프로젝트에 맞는 확장자를 사용하여 더 나은 개발 경험을 누리시기 바랍니다.

관련 영상

같이 보면 좋은 글