[React][Typescript] 이벤트 타입을 외우지 않아도 되는 이유

안녕하세요😄

 

오늘은 타입스크립트에서 이벤트 핸들링을 할 때 종종 발생하는 문제에 대해 포스팅하겠습니다.

 

타입스크립트는 어떠한 것이든 타입을 명시해 주어야 합니다. 타입을 모른다면 any라도 해줘야겠죠?

 

하지만 타입을 모른다고 무작정 any로 채워넣는 건 좋지 않습니다. 그럴 바에 그냥 자바스크립트로 리액트를 사용하는게 훨씬 편하겠죠.

 

Vscode와 같은 IDE가 있다면 다른 인텔리전시 플러그인 없이도 타입을 알아낼 수가 있습니다.

 

다음 코드를 한 번 보겠습니다.

 

const TelArea: React.FC = () => {
  const [value, setValue] = useState('');
  const onChange = (e) => {
  	const { value } = e.target;
  }
  return (
  		<input onChange={onChange} value={value}></input>
   )
)

 

input에 onChange 이벤트 핸들링 함수를 작성합니다. 여기서 e의 타입을 명시해 주지 않았기 때문에 당연히

 

 

암시적으로 any 형식을 포함한다고 하지만, 타입을 정의하지 않으면 계속 에러가 발생합니다.

기본적으로 onClick, onSubmit, onChange 등의 이벤트는 각자 다른 타입을 가지고 있고, 심지어 같은 onChange 함수여도 핸들링하는 요소가 input이냐, textarea이냐에 따라 달라지기도 합니다. 이럴 때 타입을 전부 다 외우고 다니는 건 불가능합니다.

 

 

이럴때는 onChange 부분에 커서를 올려 봅시다. 

Vscode 에서 알아서 타입을 유추해 주네요. React.ChangeEvent<HTMLInputElement> 타입으로 입력해 주면 되겠습니다.

 

 

흠... 🧐 사실

e:any

e:React.ChangeEvent<any>

 

이런식으로 입력해줘도 아무런 문제가 없지만, 기왕 타입스크립트를 사용한다면 명시해줄 수 있는 상황의 타입은 최대한 명시해주는 편이 좋겠죠? 😎

 

 

타입스크립트는 이런 번거로움이 있지만, 요즘 개발되는 좋은 IDE, 인텔리전시에서 그 이상을 잡아주기 때문에 불편함을 감수하고 사용할 만한 가치가 있는 것 같습니다. 아마 이런 경험이 쌓여서 타입스크립트를 써도 불편함 없이 타입스크립트의 장점만을 가져갈 수 있을 것 같아요. 타린이로써 힘든 길이 되겠습니다 😅

 

 

이상으로 포스팅을 마칩니다.