타입스크립트(TypeScript)는 JavaScript에 정적인 타입을 추가하는 프로그래밍 언어이며, JSX는 JavaScript XML의 줄임말이다. 타입스크립트와 JSX를 함께 사용하면 프로젝트의 유지보수성을 향상시키고 에러를 줄일 수 있다. 그러나 두 가지 기술을 함께 사용할 때 몇 가지 유의할 점이 있다.

JSX 파일 확장자

타입스크립트와 JSX를 함께 사용할 때, 파일 확장자를 .tsx로 사용해야 한다. JSX를 지원하는 파일은 .tsx 확장자를 사용하여야 하며, .ts 확장자로는 JSX를 지원하지 않는다.

예시:

// 파일명: App.tsx
import React from 'react';

const App = () => {
  return <div>Hello, world!</div>;
};

export default App;

JSX 엘리먼트 타입

JSX에서 엘리먼트의 타입을 명시할 때, React.ReactNode 또는 ReactElement 대신 원하는 interface나 type을 사용할 수 있다. 이는 잘못된 타입이 전달되는 것을 방지하고 프로그램의 안정성을 높이는 데 도움이 된다.

예시:

interface MyComponentProps {
  name: string;
}

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

타입 정의 파일

JSX에 특정 라이브러리를 사용할 때, 해당 라이브러리의 타입 정의 파일(.d.ts)을 직접 작성해야 할 수 있다. 타입 정의 파일을 작성함으로써 라이브러리의 타입을 명시적으로 정의하여 타입 안정성을 확보할 수 있다.

예시:

// custom.d.ts
declare module 'my-library' {
  export function myFunction(value: string): JSX.Element;
}

따라서, 타입스크립트와 JSX를 조합하여 사용할 때 위의 세 가지 주의할 점을 유의하여야 한다. 이를 준수함으로써 프로젝트의 안정성과 가독성을 높일 수 있다.

참고 자료

• 타입스크립트 공식 문서
• React 공식 문서