[Typescript,React] Typescript로 Form,UseState 사용해보기

안녕하세요! 오늘은 React + Typescript의 환경에서 useState와 form에서의 타입선언 등을 알아보겠습니다! 자바스크립트를 사용하다가 처음으로 타입스크립트로 프로젝트를 진행할 때, 타입스크립트에 익숙하지 않은 사람들이 힘들어하는 부분일 것이라 생각해서 정리해보도록 하겠습니다!

 

#1. Form event with react+typescript

저도 처음 타입스크립트환경에서 리액트로 프로젝트를 할 때 form의 타입을 무엇으로 설정하는지 몰라 한참 찾았던 기억이 있습니다 ㅠㅠ

javascript에서는 form의 event의 타입을 지정해주지 않아도 진행이 되지만, 타입스크립트는 event가 어디서 발생하는지에 대한 타입을 지정해달라고 에러를 내뱉습니다.

 

간단하게 말하면 타입스크립트는 input에서 onchange가 일어날 때, 아니 그래서 그 이벤트에 대한 타입은 어디있는데? 라고 우리에게 불만을 표시합니다. 타입스크립트는 엄격하기 때문에 조금이라도 타입 정의가 엉망이라면 우리에게 알려줄 것입니다.

 

우선, 우리는 평소 자바스크립트 환경에서 했던대로 폼을 만들고, onChange와 onSubmit함수를 만들어 봅시다.

import React, { useState } from "react";

function App() {
  const [value, setValue] = useState("");
  const onChange = (event) => {
  
  };
  return (
    <div>
      <form>
        <input
          value={value}
          onChange={onChange}
          type="text"
          placeholder="닉네임"
        />
        <button>닉네임 변경</button>
      </form>
    </div>
  );
}

export default App;

타입스크립트에서 다음과 같은 코드를 작성했으면, 우리는 이미 onchange의 event 파라미터에서 빨간 에러를 볼 수 있을 것입니다. 🧐

콘솔에 표시되는 에러

 

에러를 살펴보면, event 파라미터는 any type을 가질 수 없다고 나타납니다.

 

" 그러면 도대체 event는 어떠한 타입을 가져야하는겁니까? 🙁 "

 

우리는 타입스크립트를 위해서 event에 어떠한 타입을 주어야하는데 저는 이 것을 "React typescript cheatsheet"의 공식문서에서 확인했습니다.

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

Forms and Events | React TypeScript Cheatsheets

이 곳에서 우리는 input의 event type을 확인할 수 있습니다.

공식 문서

 

event의 타입이 어떻게 정의되어 있는지 보이시나요?

React.FormEvent<HTMLInputElement>

다음과 같이 타입이 정의되어 있네요 다시, 프로젝트로 돌아가서 다음과 같은 타입을 정의해줘 봅시다.

import React, { useState } from "react";

function App() {
  const [value, setValue] = useState("");
  const onChange = (event:React.FormEvent<HTMLInputElement>) => {
    
  };
  return (
    <div>
      <form>
        <input
          value={value}
          onChange={onChange}
          type="text"
          placeholder="닉네임"
        />
        <button>닉네임 변경</button>
      </form>
    </div>
  );
}

export default App;

저는 타입을 정해주자 마자 에러가 사라졌는데 여러분은 어떠신가요? 😄이렇게 타입을 지정해주면 우리는 다양한 이점을 얻을 수 있습니다. 그 중 저로써 가장 행복한 것은 자동완성 기능이죠! 지금 event는 React.FormEvent의 모든 정보를 타입으로써 들고 있습니다. 따라서 우리는 저기에 제공되는 모든 메소드를 자동완성으로써 지닐 수 있게 되는거죠!

자동으로 자동완성이 되는 모습

너무너무 좋지 않나요? 저도 자바스크립트에서 타입스크립트로 처음 넘어왔을 때, 타입지정 에휴.. 굳이 해줘야하나 라는 생각을 하다가 이러한 자동완성의 맛에 빠져버렸답니다 흐흐. 특히 백엔드에서의 타입을 넘겨받을 수 있다면, 자동완성이 정말 강력해지겠죠?

 

그렇다면 폼의 onSubmit은? 마찬가지로 타입을 가져오면 되겠죠! 이번에는 FormElement로 가져오면 될 것 입니다!

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(value);
  }

  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          value={value}
          onChange={onChange}
          type="text"
          placeholder="닉네임"
        />
        <button>닉네임 변경</button>
      </form>
    </div>
  );
}

export default App;

 

콘솔에 잘 표시되는 모습

 

input과 form에 의해 변경된 value가 콘솔에 잘 표시되네요! 😃

 

 

#2. UseState with react+typescript

컴포넌트를 새로고침할 때 빠질 수 없는 react hook! useState를 사용해봅시다. 타입스크립트에서! 우선 form과 마찬가지로 자바스크립트에서 하던 방식으로 먼저 코드를 작성해보겠습니다.

 

import React, { useState } from "react";

function App() {
  const [value, setValue] = useState("안녕하세요 박상준입니다.");

  return (
    <div>
      <p>{value}</p>
    </div>
  );
}

export default App;

다음과 같은 코드를 작성했습니다. 현재 우리는 state에 "안녕하세요 박상준입니다." 라는 초기값을 생성해주었습니다. 여기서 타입스크립트는 초기값으로 타입을 추론하여 자동으로 state에 타입을 선언해줍니다.

state에 string 타입이 자동으로 선언됨.

 

다음과 같이 자동으로 string이라는 타입이 선언된 것을 볼 수 있습니다. 예를 들어 우리가 string대신 초기값으로 1이라는 값을 넣으면 이 state의 타입은 자동으로 number가 되는 것이죠. 정말 멋지지 않나요?

따라서 자바스크립트에서 우리가 JSON으로 받아오는 정보 중 실수로 number를 string으로 상태관리를 한다던가, string을 number로 하는 것에 대한 오류를 타입스크립트 환경에서는 바로바로 체크할 수 있을 것 같네요!

오늘은 Typescript환경에서 react에서 정말 많이 쓰이는 form과 useState를 어떻게 사용하나에 대한 포스팅을 해보았습니다. 더욱 많은 포스팅을 typescript+react를 공부해보며 차차 포스팅해보도록 하겠습니다.
감사합니다 ㅎㅎ