onChange event generic type

JS에서 발생하는 특정 이벤트들은 대부분 함수를 작동시킨다.

타입스크립트에서 타입을 명시하면 명시할 수록 에러 발생을 잡을 수 있으니
이또한 타입을 명시해주는 것이 좋다.

onChange 이벤트에 타입을 지정하는 방법을 알아보자.

...
	const onChange=useCallback((e:React.ChangeEvent<HTMLInputElement>)=>setValue(e.currentTarget.value),[value])

	return(
		<>
		<div>{word}</div>
		<form onSubmit={onSubmitForm}>
			<input 
			ref={inputEl} 
			value={value}
			onChange={onChange}
			/>
			<button>submit</button>

		</form>
		</>
	)

onChange에서 발생하는 DOM이벤트인 e를 받을 때 타입을 지정해줄 수 있는데
(e:React.ChangeEvent<HTMLInputElement>)=>{...}를 통해 파라메터의 타입을 지정해줄 수 있다.

혹은

useCallback 함수를 사용하였으므로 useCallback의 generic 타입을 지정해 타입을 지정해줄 수 있다.

useCallback<(e:React.ChangeEvent<HTMLInputElement)=>void>((e)=>{...},[])

코드를 보면 알 수 있듯이 가독성이 안좋아져 읽기 난해한 코드가 될 수 있다.