타입스크립트를 이용해 React component Props 전달방법

TypeScript를 통해 전달하기 위해서는 props를 전달받는
컴포넌트에 Type을 지정해주어야 합니다.

Props를 전달 하는 법

useState의 타입을
ProjuctData라는 props를 전달

main.tsx

import { ProductProps } from "./ProductList";

const [productData, setProductData] = useState<ProductProps[]>([]);

<ProductList productData={productData} />;

Props를 받는 방법

ProductList.tsx

export interface ProductProps {
  id: string;
  product: string;
  brand: string;
  nutrients: string | [];
  price: number;
  child: boolean;
}

타입을 만들었다면 선언을 해주어야합니다.
구조분해할당을 이용해서 props를 받아보겠습니다.

• productData라는 props를 받고
• productData는 ProductProps라는 타입이라고 선언하겠습니다.

const ProductList = ({productData,...}: {productData: ProductProps[];...}): JSX.Element => {
    return (
        <S.Span>총 {productData.length}개 </S.Span>의 검색결과가 있습니다.
    )
}

• props뒤에 ,를 붙이면 props를 더 추가적으로 받을 수 있습니다.
• type선언을 하는 ;뒤에 타입도 추가적으로 선언해주어야합니다.