‘~’ is not assignable to type 'IntrinsicAttributes' 에러 해결하기

노션에 작성해두었던 타입스크립트의 대표적인 IntrinsicAttributes 에러 해결을 오랜만에 적용해본 김에 velog로 옮겼다. 노션 내용은 검색 엔진에 잘 안 잡혀서 대부분 velog로 옮길 예정인데 이럴 때 조금씩 꿍싯꿍싯

해결법 핵심

전달할 때는 일반적인 방법으로 하고
전달받는 컴포넌트에서 props 옆에 'key: value' 형태로 작성한다.

전달하기

import { dataType } from 'types';
import Card from 'components/Card';

const App = (): JSX.Element => {
  const [data, setData] = useState<dataType[] | undefined>([]);
  
  ...

  return (
    <>
      <Header />
      {data && data.map((el) => <Card key={el.id} item={el} />)} // 전달한 곳
    </>
  );
};

전달받기

import { dataType } from 'types';

const Card = (props: { item: dataType }) => { // 이렇게 작성하자!
  const { title, client, due, count, amount, method, material, status } = props.item; // 꺼낼 때는 props.[key]로

  return (
    <Wrapper>
      <Header>
        <TitleWrap>
          <Title>{title}</Title>
          <Badge>상담중</Badge>
        </TitleWrap>
        <Client>{client}</Client>
        <Due>{due}까지 납기</Due>
      </Header>

      ...
  );
};

추가: 전달하는 props가 함수인 경우

function FeedbackButton(props: { onClick: () => void }) { 
  return (
    <button className="Feedback-button" type="button" onClick={props.onClick}>
      <img src={feedbackicon} className="Feedback-button-icon" alt="feedback" />
    </button>
  );
}

출처: Stackoverflow