ERR
TS2322: Type '{ content: string; setTodoList: Dispatch<any>; }' is not assignable to type 'IntrinsicAttributes & IProps'.
Property 'setTodoList' does not exist on type 'IntrinsicAttributes & IProps'.
WHEN
- 하위 컴포넌트로 상태갱신 함수를 전달하던 중 타입에러가 발생했다.
WHY
- 이는 하위 컴포넌트에서 전달받으려는 props의 타입을 지정해주지 않아서 생기는 오류였다.
SOLVE
- 먼저, 어떤 타입이 전달될지 모르므로 any와 unknown 타입을 선택 할 수 있었는데, 둘중 unknown 이 더 안정적인 개발이 가능하다고 하여 unknown을 선택했다.
- props의 이름과 해당 타입을 자식 컴포넌트의 인터페이스에 추가해줌으로써 해결했다.
interface IProps {
setTodoList: unknown;
}
function Input({ setTodoList }: IProps): JSX.Element {
return (
<Container>
<form>
<input type="text" />
<button type="button">+</button>
</form>
</Container>
);
}
- 아무 생각없이 전달해주던 상태 갱신함수마저 오류를 뿜으니 상당히 당황스럽다...
- 하지만 이번에 시간을 들여 원인을 찾았으니, 다음부턴 확실하게 알 수 있을 듯!