[React, TypeScript] 리액트 + 타입스크립트에서 Props 전달하는 방법 - IntrinsicAttributes 오류

IntrinsicAttributes 오류

IntrinsicAttributes 의 사전적 의미: 내장 속성, 고유 속성
타입스크립트와 리액트를 이용해서 간단한 투두리스트 예제를 만드는 연습을 하고 있는데,
하위 컴포넌트에 props를 전달하는 과정에서 해당 오류가 발생하였고, 해결한 방법을 정리 해보겠습니다.

Type '{ toDo: ToDoItem; }' is not assignable to type 'IntrinsicAttributes'.
Property 'toDo' does not exist on type 'IntrinsicAttributes'.
// 해당 유형은 IntrinsicAttributes에 할당할 수 없습니다. 라는 형태의 오류
// 하위 컴포넌트의 전달하는 props의 타입을 지정을 해주지 않아서 나타나는 오류

해결방법

부모 컴포넌트 - ToDoList.tsx

const ToDoLIst: React.FC = () => {
  return (
    <ul>
      {
        toDoList.map((li) => {
          return (
            <ToDo toDo={li} key={li.id}/>
          )
        })
      }
    </ul>
  );
};
export default ToDoLIst;

자식 컴포넌트 - ToDo.tsx

1. interface로 타입지정 후 React.FC<Props>형태로 작업

// props의 해당 타입을 인터페이스로 지정
interface Props {
  toDo: ToDoItem
}

const ToDo: React.FC<Props>= ({ toDo }) => {
  const dispatch = useDispatch()
  const handleClickDelete = (e: any): void => {
    const id = parseInt(e.target.parentNode.id)
    dispatch(dispatchDelete(id))
  }
  return (
    <li id={`${toDo.id}`}>
      {toDo.text}
      <button onClick={handleClickDelete}>Del</button>
    </li>
  );
};
export default ToDo;

2. 따로 타입 지정 없이 직접 타입 지정

const ToDo = ({ toDo }: {toDo: ToDoItem}) => {
  const dispatch = useDispatch()
  const handleClickDelete = (e: any): void => {
    const id = parseInt(e.target.parentNode.id)
    dispatch(dispatchDelete(id))
  }
  return (
    <li id={`${toDo.id}`}>
      {toDo.text}
      <button onClick={handleClickDelete}>Del</button>
    </li>
  );
};
export default ToDo

참고

2. 리액트 컴포넌트 타입스크립트로 작성하기
<React에서 Typescript로 Props 사용하기>
타입스크립트 React props 전달하는 방법 및 IntrinsicAttributes 오류
[TS]Props Error(IntrinsicAttributes 오류)