~~ is not a function 발생
부모 컴포넌트에서 생성한 useState를 자식 컴포넌트로 넘기려는데 state는 잘 전달됬지만 setState에서 아래와 같은 error가 발생했다….
평소 같았다면 문제 없었을 코드인데…. 달라진건 이번엔 TypeScript를 쓴다는 것
~~ is not a function 해결
기존 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const StarClick = (count: any, setCount: any) => {
const starOnChange = (e: any) => {
const num = e.target.defaultValue;
setCount(num);
};
return (
<div>
<input value={count} onChange={(e) => starOnChange(e)} />
</div>
);
};
export default StarClick;
해결한 코드
이렇게 interface를 생성해 type 정의를 해주니 해결되었다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
interface childProps {
count: number;
setCount: React.Dispatch<React.SetStateAction<number>>;
}
const StarClick = ({ count, setCount }: childProps) => {
const starOnChange = (e: any) => {
const num = e.target.defaultValue;
setCount(num);
};
return (
<div>
<input value={count} onChange={(e) => starOnChange(e)} />
</div>
);
};
export default StarClick;
마치며
혹시 잘못된 정보나 궁금하신 게 있다면 편하게 댓글 달아주세요.
지적이나 피드백은 언제나 환영입니다.