[React][TypeScript] form을 구현해보자 (onChange event에 type추가하는 방법,)

이번 포스팅에서는 react와 typescript를 이용해서 form을 구현해볼 것 이다.

input onChange에서 event를 보면 타입이 any라고 나오는데 typeScript를 사용하는 우리는 이제 이 부분에 대해서도 타입을 지정해줄 것 이다. 

 

그러면 도대체 어떤 타입을 가져아 하는 것 일까?

https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forms_and_events/

Forms and Events | React TypeScript Cheatsheets

 

공식문서에서 보면 여러 이벤트 리스트들이 있다.

여기에서 나는 FormEvent가 필요하니 FormEvent를 사용하기로 하겠다.

import React, { useState } from "react";

function App() {
  const [value, setValue] = useState("")
  const onChange = (event:React.FormEvent<HTMLInputElement>)=>{
    const {currentTarget : {value},}=event;
    setValue(value)
  };
  return (
    <div>
      <input value={value} onChange={onChange} type="text" placeholder="userName"></input>
    </div>

  );
}

export default App;

위 코드와 같이 이제 TypeScrpit는 onChange 함수가 InputElement에 의해서 실행될 것을 알게 되었다.

 

자 그럼 이제 버튼을 클릭했을때 Form에 submit을 할 수 있게 해보자

여기에서 만약 버튼이 form내에 없다면 FormEvent가 아닌 MouseEvent가 될 것 이다.

import React, { useState } from "react";

function App() {
  const [value, setValue] = useState("")
  const onChange = (event:React.FormEvent<HTMLInputElement>)=>{
    const {currentTarget : {value},}=event;
    setValue(value)
  };

  const onSubmit =(event : React.FormEvent<HTMLFormElement>)=>{
    event.preventDefault();
    console.log("hello", value)

  }

  return (
    <form onSubmit={onSubmit}>
    <div>
      <input value={value} onChange={onChange} type="text" placeholder="userName"></input>
    </div>
    <button>Log in</button>
    </form>
  );
}

export default App;

form태그에서 onSubmit 또한 하나의 event다 여기에 onSubmit 함수를 적용시켰는데 onSubmit 또한 React.FormEvent이다. 

근데 이번엔 Form에서 이벤트를 발생시켰으니 <HTMLFormElement>를 넣어줬다.

 

이렇게 하고 Log in 버튼을 눌러줬을 때 실행이 잘 되는 것을 확인할 수 있다. 

 

다음 포스팅에서는 React.js + TypeScript + styled Component + Theme(테마)를 적용해보자