React 앱에서 작업할 때, React Props에 대한 타입을 선언하는 것이 가장 일반적인 타입스크립트 활동일 것입니다.

props를 타입지정하는 가장 좋은 방법에 대한 논쟁이 있습니다. 이 글에서는 각 방법의 장단점을 보여주고 제가 추천하는 방법을 알려드리겠습니다.

직접 해보면서 배우고 싶으시다면, 제 무료 인터랙티브 강좌인 React와 TypeScript를 확인해 보세요.

Props를 타입지정하는 3가지 방법

인라인 객체 리터럴

props는 인라인 객체 리터럴을 사용하여 선언할 수 있습니다.

import { ReactNode } from "react";
 
const Wrapper = (props: {
  children?: ReactNode;
}) => {
  return <div>{props.children}</div>;
};

Props 타입도 구조화되어 이상한 {}: {} 구문이 생성됩니다.

import { ReactNode } from "react";
 
const Wrapper = ({
  children,
}: {
  children?: ReactNode;
}) => {
  return <div>{children}</div>;
};