React에서 함수형 컴포넌트를 만들 때 JSX를 TypeScript와 함께 사용하는 방법을 살펴보겠습니다. JSX를 사용하면 UI를 선언적인 방식으로 표현할 수 있으며, TypeScript를 사용하면 정적 타입 검사를 통해 코드의 안정성을 높일 수 있습니다.

이 글에서는 TypeScript와 함께 JSX를 사용하여 React 함수형 컴포넌트를 작성하는 방법을 알아보겠습니다.

JSX란 무엇인가?

JSX(JavaScript XML)는 JavaScript의 확장 문법으로, UI를 선언적으로 표현하기 위해 만들어졌습니다. JSX를 사용하면 HTML과 비슷한 형식으로 UI를 작성할 수 있으며, React에서는 JSX를 이용하여 컴포넌트를 정의하고 렌더링할 수 있습니다.

TypeScript에서 JSX 사용하기

TypeScript에서 JSX를 사용하려면 파일 확장자를 .tsx로 지정해야 합니다. 이렇게 하면 TypeScript 컴파일러가 JSX 문법을 해석할 수 있습니다.

import React from 'react';

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

위의 예제에서 MyComponent는 JSX를 사용하여 선언되었습니다.

컴포넌트 Props의 타입 지정하기

함수형 컴포넌트의 경우 Props의 타입을 명확히 지정할 수 있습니다. 이를 통해 컴포넌트의 인터페이스를 명확히 정의할 수 있으며, 잘못된 Props 전달을 방지할 수 있습니다.

interface MyComponentProps {
  name: string;
  age: number;
}

const MyComponent: React.FC<MyComponentProps> = (props) => {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>Your age is {props.age}.</p>
    </div>
  );
};

위의 예제에서 MyComponent의 Props의 타입을 명시적으로 지정하였습니다.

결론

이렇게 TypeScript와 JSX를 함께 사용하여 React 함수형 컴포넌트를 작성하는 방법에 대해 알아보았습니다. JSX를 사용하면 UI를 표현하는데 있어서 간결하고 가독성이 좋은 코드를 작성할 수 있으며, TypeScript를 사용하여 타입 안정성을 높일 수 있습니다.