[ts] props 에러..

원인

LectureItem 컴포넌트에서 data prop을 전달 받는데, LectureDataItem 타입에 data필드가 없기 때문에 발생한 에러.

해결 방법

LectureItem 컴포넌트에서 data prop을 lecture와 같이 LectureDataItem타입에 맞게 필드 이름을 수정하면 된다.

interface LectureDataItem {
  id: number;
  course_title: string;
  link: string;
}

// props 에 타입 전달
interface LectureItemProps {
  lecture: LectureDataItem;
}

const LectureItem = ({ lecture }: LectureItemProps) => {
  return (
    <LectureItemWrapper>
      <LectureItemTitle>{lecture.course_title}</LectureItemTitle>
      <LectureItemLink href={lecture.link} target="_blank">
        보러가기
      </LectureItemLink>
    </LectureItemWrapper>
  );
};

const LectureList = () => (
  <LectureListWrapper>
    {initialData.map((data) => (
      <LectureItem lecture={data} key={data.id} />
    ))}
  </LectureListWrapper>
);

LectureItemProps 인터페이스에서 lectureprop의 이름을 data 에서 lecture로 수정하고, LectureItem컴포넌트에서 lecture prop을 사용하도록 변경 해주면 된다.