[React / TypeScript] props를 구조분해할당으로 전달받을 때 Type Error (TS2322)

문제상황

TS2322: Type '{ data: ReservationDataType[]; }' is not assignable to type 'IntrinsicAttributes & ReservationDataType[]'.
  Property 'data' does not exist on type 'IntrinsicAttributes & ReservationDataType[]'.

// 부모 컴포넌트

import React from "react";
import RenderComponent from "./RenderComponent";
import type { ReservationDataType } from "interface/interface";

const ReservationList = () => {
  // api 호출 & Save Data
  const data: ReservationDataType[] = [
    {
      reservationNo: "yyyyMMdd######01",
      channel: "11번가_티켓",
      orderNo: "yyyyMMdd01",
      orderName: "김기동",
      productTitle: "상품이름01",
      ticket: "1번티켓" + " / " + "1개" + "\n" + "2번티켓" + " / " + "2개",
      price: 110000,
      paidPrice: 100000,
      orderTime: "2022.01.01 01:01",
      reservationStatus: "paid",
      ticektStatus: "used",
    }
    ...
  ];

  return (
    <>
      <RenderComponent data={data} />
    </>
  );
};

export default ReservationList;

// 자식 컴포넌트

import React from "react";
import {
  DataTable,
  HeaderWithButton,
  SearchBox,
  TotalCountWithDescription,
} from "../../../components/molecule";
import type { ReservationDataType } from "interface/interface";

const RenderComponent = (data: ReservationDataType[]) => {
  return (
    <>
      <DataTable
        data={data?.map((item, index) => {
          return { ...item, key: index };
        })}
      />
    </>
  );
};

export default RenderComponent;

원인

자식 컴포넌트에 있는 RenderComponent = (data: ReservationDataType[]) 에 이슈가 있음.

props 객체를 그대로 전달(부모->자식) 한다.

그래서, 부모 자식간에 Type이 맞질 않게 된다.

 

해결방안

아래와 같이 고쳐주면 해결된다.

RenderComponent = ({ data }: { data: ReservationDataType[] })
// or
RenderComponent = ({ data }: { data: Array<ReservationDataType> })

이렇게 해야, 구조분해해서 전달받게 된다.

props를 그대로 전달받게 되면, render에 사용하는 모든 변수를 any 타입으로 전달해주거나 타입을 설정해줘야 한다.

위에 처럼 구조분해할당을 받아서 props를 상속받는 게 훨씬편하다.

 

참고

1. 타입스크립트 React props 전달하는 방법 및 IntrinsicAttributes 오류 https://cpro95.tistory.com/656?category=929244 

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

2.타입스크립트 React props IntrinsicAttributes 오류 https://velog.io/@yeum0523/%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-React-props-IntrinsicAttributes-%EC%98%A4%EB%A5%98

타입스크립트 React props IntrinsicAttributes 오류