[TS] 타입스크립트로 컴포넌트 props 타입 설정하기

1. 컴포넌트 props 타입 정의하기

- 변환 전 자바스크립트 코드

const goalCard = (data) => {
    return <GoalCard data={data} />;
};
 
 ...
 
function GoalCard({ data }) {...}

 

- 변환 후 타입스크립트 코드

const goalCard = (data: GoalDataInfo) => {
    return <GoalCard data={data} />;
};
 
 ...
 
function GoalCard({ data }: GoalProps) {...}

// 타입 설정
export interface GoalDataInfo {
  startYear: string;
  startMonth: string;
  startDate: string;
  endYear: string;
  endMonth: string;
  endDate: string;
  goalContents: string;
  price: string;
  id: string;
}

export type GoalProps = {
  data: GoalDataInfo;
};

 

- 참고 사이트

https://velog.io/@ovogmap/React-Typescript-2

React + Typescript 프롭스 타입 정의 하기

https://velog.io/@ahsy92/TypeScript-React-TypeScript-Props-type%EC%A0%95%EC%9D%98-%ED%95%98%EA%B8%B0

[TypeScript] React TypeScript Props type정의 하기