onChange event generic type

YOUNGJOO-YOON·2021년 7월 6일
0

TS+REACT

목록 보기
1/10

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)=>{...},[])

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

profile
이 블로그의 글은 제 생각을 정리한 글과 인터넷 어딘가에서 배운 것을 정리한 글입니다. 출처는 되도록 남기도록 하겠습니다. 수정 및 건의 오류 등이 있으면 언제든지 댓글 부탁드립니다.

0개의 댓글