React 컴포넌트 간에 props 데이터 전달 과정에서의 type error

문제

상위 컴포넌트 내에서 하위 컴포넌트로 props를 전달하는 과정에서 type 에러가 발생하였다.

export interface InfoType {
  [key: string]: any;
  id: number;
  title: string;
  client: string;
  due: string;
  count: number;
  amount: number;
  method: string[];
  material: string[];
  status: string;
}

const InfoListForm: FC<OptionalProps> = ({ method, material, status }) => {
 
 	( ... )
 
  return (
    <Container isEmpty={isEmpty}>
      {isEmpty ? (
        <GuideLine>
          <FrontInformation>조건에 맞는 견적 요청이 없습니다.</FrontInformation>
        </GuideLine>
      ) : (
        currentInfoList.map((info: InfoType, index) => {
          return <CardBoard key={info.id} info={info} index={index} />;
        })
      )}
    </Container>
  );
};

'{ key: number; info: InfoType; index: number; }' 형식에 'InfoType' 형식의 id, title, client, due 외 5개 속성이 없습니다.
ts(2740)

 

문제해결

interface InfoType 자체를 인터페이스로 사용하려고 발생 한 문제였다.

 

이를 해결하기 위해 props로 넘겨주는 데이터를 스프레드 문법을 사용하여 개별적인 값들의 목록으로 만든 뒤 하위 컴포넌트 인자 내에서 하나의 객체 값으로 받아 디스트럭쳐링 할당을 통해 각 값들을 사용하였다.

const InfoListForm: FC<OptionalProps> = ({ method, material, status }) => {

	( ... )
    
  return (
    <Container isEmpty={isEmpty}>
      {isEmpty ? (
        <GuideLine>
          <FrontInformation>조건에 맞는 견적 요청이 없습니다.</FrontInformation>
        </GuideLine>
      ) : (
        currentInfoList.map((info: InfoType, index) => {
          return <CardBoard key={info.id} {...info} index={index} />;
        })
      )}
    </Container>
  );
};

const CardBoard: FC<InfoType> = (info: InfoType) => {
  const { title, client, due, count, amount, method, material, status, index } = info;

  ( ... )
  
};