TypeScript
를 통해 전달하기 위해서는 props를 전달받는
컴포넌트에Type
을 지정해주어야 합니다.
useState
의 타입을
ProjuctData라는 props를 전달
main.tsx
import { ProductProps } from "./ProductList";
const [productData, setProductData] = useState<ProductProps[]>([]);
<ProductList productData={productData} />;
ProductList.tsx
export interface ProductProps {
id: string;
product: string;
brand: string;
nutrients: string | [];
price: number;
child: boolean;
}
타입을 만들었다면 선언을 해주어야합니다.
구조분해할당을 이용해서 props를 받아보겠습니다.
const ProductList = ({productData,...}: {productData: ProductProps[];...}): JSX.Element => {
return (
<S.Span>총 {productData.length}개 </S.Span>의 검색결과가 있습니다.
)
}
,
를 붙이면 props를 더 추가적으로 받을 수 있습니다.;
뒤에 타입도 추가적으로 선언해주어야합니다.