JSX는 JavaScript XML의 약자로, JavaScript 코드 안에 XML/HTML과 같은 구조를 작성할 수 있게 해주는 문법입니다. 이것은 주로 리액트에서 UI를 작성하기 위해 사용됩니다. TypeScript를 사용하면 더욱 강력한 정적 타입 검사를 받을 수 있어, 안정적이고 가독성 있는 코드를 작성할 수 있습니다. 이 글에서는 TypeScript와 JSX를 함께 사용하여 리액트 컴포넌트를 작성하는 방법에 대해 알아보겠습니다.

1. 확장자 설정

먼저 TypeScript에서 JSX를 사용하기 위해서는 파일의 확장자를 .tsx로 설정해야 합니다. JSX를 사용하지 않는 TypeScript 파일은 .ts확장자를 사용하므로 .tsx 확장자를 사용함으로써 해당 파일에 JSX가 포함되어 있다는 것을 명시적으로 나타냅니다.

// 예시: MyComponent.tsx

2. 함수 컴포넌트 작성

TypeScript를 사용하여 함수 컴포넌트를 작성할 때는 다음과 같이 작성할 수 있습니다.

import React from 'react';

type MyComponentProps = {
  name: string;
};

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

export default MyComponent;

위 예제에서 MyComponentProps는 컴포넌트의 속성을 정의하는 인터페이스이며, MyComponent는 해당 속성을 받아 화면에 출력하는 함수 컴포넌트입니다.

3. 클래스 컴포넌트 작성

클래스 컴포넌트를 작성할 때는 다음과 같이 작성할 수 있습니다.

import React, { Component } from 'react';

type MyComponentProps = {
  name: string;
};

type MyComponentState = {
  count: number;
};

class MyComponent extends Component<MyComponentProps, MyComponentState> {
  state = {
    count: 0
  };

  render() {
    return (
      <div>
        <p>Hello, {this.props.name}!</p>
        <p>Count: {this.state.count}</p>
      </div>
    );
  }
}

export default MyComponent;

위 예제에서 MyComponentProps는 컴포넌트의 속성을 정의하는 인터페이스이며, MyComponentState는 컴포넌트의 상태를 정의하는 인터페이스입니다. MyComponent 클래스 내부에서 속성과 상태를 참조할 때, 각각 this.props와 this.state를 사용합니다.

4. 결론

JSX와 TypeScript를 함께 사용하여 리액트 컴포넌트를 작성하는 방법에 대해 알아보았습니다. TypeScript를 사용하면 컴포넌트의 속성과 상태에 대한 타입을 명확히 지정할 수 있으며, 이를 통해 안정적이고 유지보수하기 좋은 코드를 작성할 수 있습니다.

더 많은 정보를 원하시면 공식 TypeScript 문서를 참고하시기 바랍니다.