input과 form에 타입스크립트를 적용해보자
import React, { useState } from "react";
const App = () => {
const [value, setValue] = useState("");
const onChange = (event: React.FormEvent<HTMLInputElement>) => { // 여기서 event에 FormEvent - HTML InputElement를 사용한다고 정정을 해줬다.
setValue(event.currentTarget.value); // 그렇게 되면 여기서 event. 오타가 발생을 해도 타입스크립트가 바로 잡아준다.
console.log(event.currentTarget.value);
};
const onSubmit = (event: React.FormEvent<HTMLFormElement>) => { // 여기서는 event에 FormEvent -HTML Form Element를 사용한다고 명시를 해줬다.
event.preventDefault(); // 그러기에 event. prrrreventDefault로 적게되면 바로 타입스크립트가 오률르 잡아준다.
console.log("hello", value);
};
return (
<div>
<form onSubmit={onSubmit}>
<input
type="text"
placeholder="username"
value={value}
onChange={onChange}
/>
<button>추가</button>
</form>
</div>
);
};
export default App;