[React + Typescript] IntrinsicAttributes 에러

javascript 개발: 뭐가 문제인지 모르겠다.
typescript 개발: 뭐가 문제인지는 알 것 같다.

하지만 둘다 에러가 나는 것은 똑같다🙃

InstrinsicAttributes 에러

typesript와 redux를 활용해서 간단한 todo 앱을 개발하는 도중 callback함수를 prop로 전달하는 과정에서 InstrinsicAttributes 에러가 발생했다. 에러가 발생함에 감사하면서도 등산하는 것처럼 한발한발이 타입을 넘어가야 하는 것이 무겁기도 하다. 

친절한 TS

---

해결 방법

tsx에서는 props를 전달 받을 때 전달받을 인터페이스를 정의해주어야 한다. React.FC를 통해 제네릭으로 지정한 인터페이스를 전달해주면 jsx에서 props를 받을 때와 같이 받을 수 있다. ReactFC를 사용하지 않고도 Props Interface를 정의한다면 onAdd라는 함수를 정상적으로 받을 수 있다. 

interface Props{
    onAdd:(todo:ToDo)=>void;
}

const AddToDo:React.FC<Props> = ({onAdd}) => {...}

interface Props{
    onAdd:(todo:ToDo)=>void;
}

const AddToDo = ({onAdd}:Props) => {...}

하지만 찜찜하다. 아직 IntrinsicAttributes 에러가 난 이유를 모른다. 

 

JS에서는 타입이 없어서 에러가 나지 않지만 TS에서는 당연하게도 타입을 지정해주어야 한다.

앞서 onAdd라는 함수를 전달했지만 받은 컴포넌트의 입장에서는 이 Props이 어떤 식으로 구성되어 있는지 알 수 없다. 이를 위해 Interface Prop를 지정해주어 props을 받게 된다면 전달한 prop과 전달받은 prop를 체크하여 에러가 발생하는지 체크할 수 있다. InstrinsicAttribute 에러가 발생한다면 전달한 타입을 지정하는 것을 빼먹지는 않았는지, 지정하지 않는 prop을 전달하지 않았는지 확인해보아야 할 것 같다.

const AddToDo = ({onAdd}:{onAdd:(todo:ToDo)=>void}) => {...}

결론적으로는 위와 같이 interface를 지정하지 않고도 들어오는 prop에 대한 정의를 해주면 해결된다. 하지만 이 경우는 너무 가독성이 떨어지기 때문에 interface를 설정해서 받는 편이 보다 좋을 것 같다.