[typescript] JSX에서 타입스크립트 타입 정의하는 방법

18 Dec 2023

typescript

TypeScript에서 JSX를 사용하면서, JSX 엘리먼트의 타입을 명확하게 정의할 수 있습니다. JSX를 사용할 때, 각 엘리먼트가 어떤 타입을 가지고 있는지 명시함으로서 코드의 가독성과 유지보수성을 높일 수 있습니다.

기본 원칙

TypeScript에서 JSX 엘리먼트의 타입을 정의하는 방법은 간단합니다. 각 엘리먼트의 타입은 React.ReactNode을 기본으로 사용하며, 필요에 따라 더 구체적인 타입으로 명시할 수 있습니다.

import React from 'react';

interface MyComponentProps {
  name: string;
}

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

const App: React.FC = () => {
  return (
    <div>
      <MyComponent name="TypeScript" />
    </div>
  );
};

위 예시에서 MyComponent의 prop name은 string 타입으로 명시했습니다.

사용자 정의 컴포넌트의 타입 정의

사용자 정의 컴포넌트의 타입을 정의할 때 React.FC를 사용하여 컴포넌트의 prop을 명시합니다.

import React from 'react';

interface MyComponentProps {
  name: string;
}

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

const App: React.FC = () => {
  return (
    <div>
      <MyComponent name="TypeScript" />
    </div>
  );
};

강제 형 변환

만약 사용자 정의 컴포넌트의 타입이 JSX.Element이 아닌 다른 타입이라면, 해당 컴포넌트의 타입을 강제 형 변환하여 명시할 수 있습니다.

import React from 'react';

interface MyComponentProps {
  name: string;
}

const MyComponent = ({ name }: MyComponentProps): JSX.Element => {
  return <div>Hello, {name}</div>;
};

const App: React.FC = () => {
  return (
    <div>
      {(MyComponent as React.FC<MyComponentProps>)} name="TypeScript" />
    </div>
  );
};

마무리

이러한 방법으로 TypeScript에서 JSX의 타입을 명시함으로서 코드의 안정성과 가독성을 높일 수 있습니다. 타입을 명시함으로써 개발자들이 프로젝트를 유지보수하고 확장하는 데 도움이 될 것입니다.

더 알아보기: TypeScript 공식 문서