[React] 자식 컴포넌트에 객체 props 전달 TypeScript

 

상품리스트를 가져와서 리스트만큼 map을 돌린뒤 자식컴포넌트에게 상품 객체를 던져주는 로직을 작성하고싶었다.

자바스크립트로 작성하면 그냥 넘겨주기만 하면 끝이지만 타입스크립트로 작성하려고하니

넘겨주는 타입과 받는 타입 모두 작성이 필요했다. 넘겨줄때는 어렵지않았는데 받는쪽에서 객체로 받을때 어려움을겪었다.

검색을 통해 방법을 알아내서 기록으로 남긴다.

 

바로 코드로 알아보자

 

먼저 넘겨줄 객체의 타입을 인터페이스로 정의해준다. (type이나 interface나 사용자 재량껏 사용)

export interface IProduct{
  id: number;
  productName: string;
  tag: string[];
  price: number;
  salePrice: number;
  img: string;
}

 

부모컴포넌트

자식컴포넌트(childComponent)로 정의해둔 타입으로 props를 넘겨준다.

    {data
	? data.map((item: IProduct, idx: number) => {
            return <childComponent key={idx} props={item} />;
  	})
	: ''}

 

자식컴포넌트

헤매고헤맸던 자식컴포넌트에서의 타입정의이다. props가 객체형태이기에 {}로 감싸주고 props의 타입을 지정해주면된다.

const ItemCard = ({ props }: { props: IProduct }) => {
  const { productName, price, salePrice, img, tag } = props;
  return(
    //props를 사용해주면된다.
	<div>{productName}</div>
  )
 }

 

 

+ 도움을 받은 블로그

https://cpro95.tistory.com/656?category=929244

타입스크립트 React props 전달하는 방법 및 IntrinsicAttributes 오류 해결