타입스크립트 제네릭을 이용한 컴포넌트제작 질문입니다

[김창규]

안녕하세요 제가 타입스크립트를 사용하던중 제네릭을 이용하여 재사용 컴포넌트를 만드는 방법에 대해 찾아보고 있습니다.
아래와 같이 공통점이 있고 부분적으로 다른 객체의 이름을 가진 두 가지 데이터를 제네릭을 이용한 컴포넌트에서
출력해보고자 합니다. 인터넷을 찾아보면 나름 작성을 해봤는데 아직 제네릭을 익숙치 않아서 그런지
data에 해당 속성을 찾을 수 없다는 오류가 발생하고 있습니다. 혹시 제가 제네릭을 사용한 컴포넌트를 잘못 이해하고 있는지
봐주시면 감사하겠습니다

export type DataType1 = {
  id: number;
  name: string;
  phoneNum: string;
  email: string;
  service: {
    name: string;
    price: number;
  }[];
  career: string[];
}[];

export type DataType2 = {
  id: number;
  name: string;
  phoneNum: string;
  email: string;
  rating: number;
  ratingNum: number;
  service: {
    name: string;
    price: number;
  }[];
  career: string[];
  report: number;
}[];

 제너릭을 이용한 컴포넌트 부분

import { Checkbox } from "./CheckBox";
import ExpertCss from "../css/Table.module.css";
import {
  AllCheckBoxHandler,
  CheckBoxHandler,
} from "../handler/CheckBoxHandler";
import { ExpertPOST } from "../server/expert/Post";
import { DataType1, DataType2 } from "../pages/Expert";
type DataType = DataType1 | DataType2;

type PropsType<T> = {
  data: T[];
};

export default function Table<T extends DataType>({ data }: PropsType<T>) {
  return (
    <table className={`${ExpertCss.tableContainer}`}>
      <thead>
        <tr className={`${ExpertCss.division} ${ExpertCss.verticalMiddle}`}>
          <th className={`${ExpertCss.name} ${ExpertCss.verticalMiddle}`}>
            <div>
              <Checkbox object={AllCheckBoxHandler} />
              <span>이름</span>
            </div>
          </th>
          <th
            className={`${ExpertCss.service} ${ExpertCss.verticalMiddle} ${ExpertCss.tableInsertPadding}`}
          >
            서비스
          </th>
          <th
            className={`${ExpertCss.career} ${ExpertCss.verticalMiddle} ${ExpertCss.tableInsertPadding}`}
          >
            커리어
          </th>
          <th
            className={`${ExpertCss.verticalMiddle} ${ExpertCss.tableInsertPadding}`}
          >
            <button className={ExpertCss.delete} onClick={ExpertPOST}>
              삭제
            </button>
          </th>
        </tr>
      </thead>
      <tbody>
        {data.map((data, index) => (
          <tr key={data.id} className={`tableTr ${ExpertCss.tableHeight}`}>
            <td className={`${ExpertCss.verticalMiddle}`}>
              <div className={`${ExpertCss.dataName} dataSet `} data-id={index}>
                <Checkbox object={CheckBoxHandler} />
                <span className={`${ExpertCss.tableInsertPadding}`}>
                  {data.name}
                </span>
              </div>
            </td>
            <td
              className={`${ExpertCss.verticalMiddle} ${ExpertCss.tableInsertPadding}`}
            >
              <div className={ExpertCss.dataService}>
                {data.service.map((service, index) => (
                  <div key={index}>
                    {service.name}
                    {index !== data.service.length - 1 && <span>/</span>}
                  </div>
                ))}
              </div>
            </td>
            <td
              className={`${ExpertCss.verticalMiddle} ${ExpertCss.tableInsertPadding}`}
            >
              <div className={ExpertCss.dataCareer}>
                {data.career.map((career, index) => (
                  <div key={index}>
                    {career}
                    {index !== data.career.length - 1 && <span>|</span>}
                  </div>
                ))}
              </div>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

• 이 게시글은 김창규에 의해 1 년, 2 월 전에 수정됐습니다.

[codingapple]

Table태그 쓸 때 <타입> 이런거랑 props 잘넣고 있는지 확인해봅시다

[김창규]

감사합니다 다시 확인해보니까 타입에 문제가 있었네요!

[글쓴이]

글