JSX와 TSX

JSX와 TSX는 React와 TypeScript를 사용하면서 자주 접하게 되는 파일 확장자이자 문법입니다.

JSX란?

JSX (JavaScript XML)는 JavaScript 안에서 HTML을 작성할 수 있게 해주는 문법입니다. React에서 UI를 만들 때 자주 사용됩니다.

// JSX 예제 (보통 .js 또는 .jsx 확장자로 저장)
import React from "react";

function MyComponent() {
  return <h1>Hello, world!</h1>;
}

export default MyComponent;

위 코드에서 <h1>Hello, world!</h1>처럼 JavaScript 코드 안에서 HTML 태그를 사용할 수 있는 것이 JSX의 특징입니다. 이로 인해 UI 코드를 더 직관적으로 작성할 수 있습니다.

확장자: 보통 .js 또는 .jsx 확장자를 사용합니다. JSX가 포함된 파일에는 .jsx 확장자를 사용하기도 하지만, .js 확장자를 사용하는 경우도 많습니다.

TSX란?

TSX (TypeScript XML)는 JSX와 비슷하지만, TypeScript가 적용된 파일에 사용하는 확장자입니다. TypeScript를 React와 함께 사용할 때는 .tsx 확장자를 사용해 컴포넌트를 작성합니다.

// TSX 예제 (보통 .ts 또는 .tsx 확장자로 저장)
import React from "react";

interface MyComponentProps {
  name: string;
}

const MyComponent: React.FC<MyComponentProps> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default MyComponent;

위 코드에서 TypeScript의 타입 시스템을 사용하여 MyComponentProps라는 인터페이스를 정의하고, name prop이 문자열이어야 한다는 규칙을 적용했습니다. .tsx 파일 안에서는 TypeScript 문법과 JSX 문법을 함께 사용할 수 있습니다.

확장자: TypeScript와 JSX가 결합된 경우 .tsx 확장자를 사용하고, 일반 TypeScript 파일은 .ts 확장자를 사용합니다.

정리

 파일       확장자                                사용 상황설명

.js	일반 JavaScript 파일	JavaScript 문법으로 작성된 파일. React 없이도 사용 가능.
.jsx	JavaScript + JSX	JavaScript 파일에서 JSX 문법을 사용할 때. React 컴포넌트 파일에 많이 사용됨.
.ts	일반 TypeScript 파일	TypeScript 문법으로 작성된 파일. React 없이도 사용 가능.
.tsx	TypeScript + JSX	TypeScript 파일에서 JSX 문법을 사용할 때. React + TypeScript 환경에서 컴포넌트 파일로 많이 사용됨.

예시로 살펴보기

JSX 예제 (.jsx)

import React from "react";

function Greeting() {
  return <h1>Hello, World!</h1>;
}

export default Greeting;

TSX 예제 (.tsx)

import React from "react";

interface GreetingProps {
  name: string;
}

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default Greeting;

위의 TSX 예제는 TypeScript의 타입 시스템 덕분에 name prop이 문자열이어야 한다는 규칙을 강제할 수 있습니다.

언제 TSX와 JSX를 사용해야 할까?

• React 프로젝트에서 TypeScript를 사용하는 경우: .tsx 파일 확장자를 사용하여 타입 검사를 통한 안전성을 확보합니다.
• JavaScript만 사용하는 React 프로젝트: .js 또는 .jsx 파일 확장자를 사용해 유연하고 빠르게 개발할 수 있습니다.

요약

• JSX: JavaScript와 HTML을 섞어 사용할 수 있는 문법.
• TSX: TypeScript와 HTML을 섞어 사용할 수 있는 문법. 타입 검사를 통해 더 안전한 코드를 작성할 수 있습니다.
• 선택 기준: TypeScript를 사용하면 .tsx, JavaScript만 사용하면 .jsx를 선택하세요.