IntrinsicAttributes 에러 해결

개인 프로젝트를 진행하던 중 IntrinsicAttributes type 에러를 마주쳤다. 아직 TS에서 props를 넘겨줄 때 type을 지정하는 실력이 미숙한 것 같다.

function Category({
  feeds,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  const myFeeds: IList[] = feeds;
  return (
    <Wrapper>
      {/* Navigation */}
      <Navigation />
      {/* Feed */}
      <Feed feeds={myFeeds} />
      {/* MyPage */}
      <Mypage />
    </Wrapper>
  );
}

Feed로 getServerSideProps에서 GET API call를 통해 얻어온 데이터를 주려고 하였다.
이 때 getServerSideProps을 통해 얻어온 데이터는 any로 받아와서 myFeeds로 type을 다시 할당해주었다.

function Feed({ feeds }: IList[]) {
 /* ... */ 
}

처음에 이런식으로 type 지정을 했는데 IntrinsicAttributes error가 발생하였다.

구글링을 해보니 {feeds}는 destructuring을 통해 props를 받아온 것이므로, type 지정은 다음과 같이 해야한다.

function Feed({ feeds }: { feeds: IList[] }) {
 /* .. */ 
}

추가로 getServerSideProps를 통해 api call을 하려고 했는데 pages/가 아닌 다른 컴포넌트에서 수행하니 call이 안되었다. 라우팅 컴포넌트에서만 call을 해야하나?