React의 Typescript 타입 종류 (1)

이 포스트에서는 컴포넌트 개발 및 상태 관리 등에서 유용하게 사용될 수 있는 react 전용 타입들을 알아보자.

React.FC

함수형 컴포넌트를 정의할 때 사용하는 타입이다. FunctionComponent의 줄임말이다.

import { FC } from 'react';

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

JSX.Element

JSX 타입을 명시한 타입이다. 단, 이 타입은 React와는 무관한 TypeScript의 JSX 타입 지원 형식이기 때문에 react를 제외한 다른 라이브러리에서 글로벌하게 사용이 가능하다.

const Greeting: FC = () => {
  return <div>Hello world!</div>;
};

const App: FC = () => {
  // React.ReactElement 타입을 사용하여 JSX 요소의 타입을 지정할 수 있다.
  const greetingElement: JSX.Element = <Greeting />;

  return (
    <div>
      {greetingElement}
    </div>
  );
};

React.ReactElement

JSX 요소를 나타내는 타입이다. 이 타입은 JSX 문법을 사용하여 생성된 엘리먼트를 타입으로 지정할 때 사용하기도 한다.

React.FC 는 함수형 컴포넌트의 타입을 지정할 때 사용되고, React.Element는 JSX 요소의 타입을 지정할 때 사용된다. 또한 React.ReactElement와 같은 JSX 요소의 타입은 주로 ts에서 자동 타입 추론을 해주므로, 필수의 사용은 아니다.

import { ReactElement } from 'react';

const Greeting: FC = () => {
  return <div>Hello world!</div>;
};

const App: FC = () => {
  // React.ReactElement 타입을 사용하여 JSX 요소의 타입을 지정할 수 있다.
  const greetingElement: ReactElement = <Greeting />;

  return (
    <div>
      {greetingElement}
    </div>
  );
};

React.ReactNode

모든 종류의 React 노드(React.ReactElement, string, null 등)를 포함한 최상단 부모 타입이다. 이 타입은 주로 컴포넌트의 children prop으로 사용되거나, 컴포넌트가 반환하는 JSX 요소들의 타입을 지정하는 데에 사용된다.

import { ReactNode } from 'react';

interface Props {
  children: ReactNode;
}

const Card: FC<Props> = ({ children }) => {
  return <div>{children}</div>;
};

const App: FC = () => {
  return (
    <Card>
      <h2>Title</h2>
      <p>Some content here.</p>
    </Card>
  );
};