Typescript #4 react-useState, event

useState

useState에는 제네릭스를 써서 타입을 선언해줄수도 있지만 해 줄 필요 없다. 마우스 올려보면 상태가 어떤 타입을 사용하고 있는지 알 수 있다.
만약 제네릭스에 타입을 선언해준다면 해당 state는 어떤 타입을 사용할 것이라고 완전히 정해놓을 수 있다. 그래서 협업할 때 다른 개발자가 다른 타입을 넣을 수가 없어지는 이점은 있을 수 있겠다. (다른 타입 넣으면 에러뜨기 때문)

import React, { useState } from 'react';

export default function Counter() {
  const [counter, setCounter] = useState<number>(0);
  return <div>{counter}</div>;
}

결론
useState에 제네릭스로 타입을 정해두면 강제성을 부여하는 것이고 타입을 안정해두면 개발에 해당 state에 어떤 상태가 들어가있는지 도움만 주는 정도라고 생각하면 된다.

event

이벤트 객체에 어떤 타입이 들어와야 하는지 매번 외우거나 검색할 필요 없이 마우스 올려보면 어떤 타입을 사용하고 있는지 나온다. 복사 붙여넣기로 해주면 그 다음부터 함수 선언식 내에서 e. 이런식으로만 쳐주면 다음에 어떤 것을 넣어야 하는지 개발에 도움을 준다.

App.tsx

import React from 'react';
import MyForm from './MyForm';

function App() {
  const onSubmit = (form: { name: string; description: string }) => {
    console.log(form);
  };
  return (
    <div className='App'>
      <MyForm onSubmit={onSubmit} />
    </div>
  );
}

export default App;

MyFrom.tsx

import React, { useState } from 'react';

type MyFormTypes = {
  onSubmit: (form: { name: string; description: string }) => void;
};
export default function MyForm({ onSubmit }: MyFormTypes) {
  const [form, setForm] = useState({
    name: '',
    description: '',
  });

  const { name, description } = form;

  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    let { name, value } = e.target;
    setForm({ ...form, [name]: value });
  };

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    onSubmit(form);
    setForm({
      name: '',
      description: '',
    });
  };

  return (
    <>
      <form onSubmit={handleSubmit}>
        <input name='name' value={name} onChange={onChange} />
        <input name='description' value={description} onChange={onChange} />
        <button type='submit'>제출</button>
      </form>
    </>
  );
}

결론
이벤트 객체에 어떤 타입을 넣어줘야 하는지는 외우지말자. 검색하지도 말자.