타입스크립트 쓰면 지겹게 만나는 에러~!
하위 컴포넌트(input)의 props로 onChange시 실행할 함수를 정한다.
전달 받는 하위 컴포넌트의 Props 안에 함수의 타입을 정의하는데 ..
<AuthInput type="text" placeholder="email" onChange={emailChange} />
🫠 해결 방법
ChangeEvent를 이용한다
import React, { useState, ChangeEvent } from 'react';
...
function emailChange(e: ChangeEvent<HTMLInputElement>) {
setEmail(e.target.value);
}
...
혹은 import를 하지 않고 매번 작성하는 방법도 있다
function pw2Change(e: React.ChangeEvent<HTMLInputElement>) {
setPw2(e.target.value);
}
이렇게 작성해도 똑같이 작용함
이때 그러면 하위 컴포넌트의 Props 안의 함수 params 값에도 넣어줘야 함
interface Props {
placeholder: string;
type: string;
onChange: (value: React.ChangeEvent<HTMLInputElement>) => void;
}