TypeScript - React 자식 컴포넌트에게 props 넘기기 (구조분해 할당)

처음 TypeScript를 경험을 하게 되면 "좋은 건가? JavaScript가 더 편한 것 같아"라는 생각을 했다가
나중에는 "어떻게 TypeScript 없이 작업했지?"라는 경험을 느낄 수 있을 거예요

 

경험했던 에러

React를 사용하게 되면 Props를 전달하게 되는 일이 많습니다.
JavaScript를 이용해 적용할 때에는 쉽게 전달하지만 TypeScript는 자식 컴포넌트에게 props를 넘겨줄 때

 

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

 

 

Props 전달 방법

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

main.tsx

import {ProductProps} from 'ProductList.tsx';

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

.
.
const [productData, setProductData] = useState<ProductProps[]>([]);
<ProductList productData={productData} />

 

 

Props를 받는 방법

구조분해할당을 이용해서 props를 받아 볼게요.

• {productData,...} 뒤에 , 를 붙이면 props를 추가적으로 받을 수 있습니다.
• 마찬가지로 type 선언을 하는 {productData: ProductProps [];....} 뒤에 타입도 추가적으로 선언해 주어야 돼요.

ProductList.tsx

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