[React] Typescript와 React로 Form 구현하기

리액트와 타입스크립트의 도움을 이용해서 Form을 구현해보겠습니다.

- App.tsx 기본 작성

function App() {

  return (

    <div >

      <form>

        <input type="text" placeholder="username"/>

        <button>Login</button>

      </form>

    </div>

  );

}

export default App;

목표 : input의 value를 state와 연결하기 -> useState

import { useState } from "react";

function App() {

 

  const [value, setValue] = useState("");

  const onChange = (event) => {};

  return (

    <div >

      <form>

        <input

          /*input의 value를 state의 value와 연결*/

          value={value}

          onChange={onChange}

          type="text"

          placeholder="username"/>

        <button>Login</button>

      </form>

    </div>

  );

}

export default App;

onChange함수에서 event에 접근하고 싶은데 타입스크립트는 event를 any type으로 알고있습니다. 하지만 가능한한 any type 사용하는 것을 배제하는 것이 좋습니다. 타입스크립트에게 어떤 타입을 쓸 것인지 알려주는게 좋습니다. 그래서 ReactJS내에서 event에 type을 추가해보겠습니다.

- event에 type 추가하기

#React.FormEvent를 사용하면 어떤 종류의 element가 이 onChange 이벤트를 발생시킬지 특정할 수 있습니다.

 const onChange = (event: React.FormEvent<HTMLInputElement>) => {

    console.log(event.currentTarget.value)

  };

#타입스크립트는 onChange함수가 InputElment(<Input>)에 의해 실행될 것을 알게됩니다. 이제 Input 태그에 onChange함수를 적용시킬 수 있고 event.currentTarget.value를 통해서 input태그의 value도 콘솔창에 출력할 수 있게 되었습니다. event.currentTarget.value는 리액트에서 event.target.value라고 사용했던 것과 같은 기능을 합니다.

- 결과

#setState함수로 state를 update하지 않았기 때문에 input값을 입력해도 화면이 update되지 않습니다. 화면에 입력하는 값을 표시하려면 setValue함수로 value를 업데이트 시켜줘야합니다.

- setValue로 value값 업데이트하기

const onChange = (event: React.FormEvent<HTMLInputElement>) => {

    const {

      currentTarget: {value},

    } = event;

    // const value = event.currentTarget.value;

    // const {value} =event.currentTarget;

    setValue(value);

  };

+ 참고

 

 

- Login 버튼을 클릭하면 Form submit하기

onSubmit 함수를 만들고 onSubmit 또한 React.FormEvent이기 때문에 위와 같이 타입스크립트에게 이벤트 타입을 알려주겠습니다.

import { useState } from "react";

function App() {

  const [value, setValue] = useState("");

  const onChange = (event: React.FormEvent<HTMLInputElement>) => {

    const {

      currentTarget: {value},

    } = event;

    // const value = event.currentTarget.value;

    setValue(value);

  };

  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {

    event.preventDefault();

    console.log("hello",value);

  }

  return (

    <div >

      <form onSubmit={onSubmit}>

        <input

          value={value}

          onChange={onChange}

          type="text"

          placeholder="username"/>

        <button>Login</button>

      </form>

    </div>

  );

}

export default App;

#form에 onSubmit 함수를 연결시켜줬고 로그인 버튼을 누르면 console에서 hello + 입력값을 확인할 수 있습니다.

- 결과

 

이번 포스팅에서 리액트 타입스크립트를 이용해서 form에 type을 적용하는 방법을 알아봤습니다. 위의 코드는 평범한 Javascript + ReactJS 로 작성하였고 단지 조금 다른 부분은 React.FormEvent<HTMLInputElment>를 통해서 타입스크립트에게 타입을 전달한 것입니다.

따라서 타입스크립트가 우리의 useState와 event를 보호해주고 event의 자동완성기능을 사용할 수 있게 도와줍니다. 어쩌다 실수를 하더라도 타입스크립트가 실수를 알려주게 됩니다.