[TypeScript] TypeScript에서의 input 관리

TypeScript

TypeScript에서의 input 상태 관리

Arrow Function

아래와 같이 React.FC라는 것을 사용해서 type을 지정할 수 있지만, React.FC에는 기본적으로 children이 탑재되어 있다. 그렇기 때문에 Greetings. ~ 자동완성이 되도록 사용할 수 있지만
치명적인 단점이 존재하는데 default props가 작동하지 않는다.
그러므로 인자를 받을때 직접 넣어줘야한다.
또한, children을 사용하지 않는 컴포넌트에도 사용하게되면 불필요한 children이 늘어난다는 단점이 있다.

--------------------------------------------------------------- Forms.tsx
import React, {useState} from 'react';

// Form에서 받는 Props -> onSubmit 함수 (인자로 form :{...} 을 받는다.)
// form의 name은 문자, description은 문자
type MyFormProps = {
  onSubmit: (form: {name: string; description: string}) => void
};

// onSubmit을 비구조할당하여 받고 type은 MyFormProps
function MyForm({onSubmit}: MyFormProps){
  const [form, setForm] = useState({
    name: '',
    description: ''
  })

  // form에서 name, description 비구조 할당
  const {name, description} = form;

  // e: any로 지정하고 마우스를 올라면 해당 이벤트의 type을 볼 수 있다.
  // onChange 함수가 실행되면 form의 name, description value 변경
  const onChange = (e:React.ChangeEvent<HTMLInputElement>) => {
    const {name, value} = e.target;
    setForm({
      ...form,
     [name]: value,
    })
  }

  // e: any로 지정하고 마우스를 올라면 해당 이벤트의 type을 볼 수 있다.
  // handleSubmit이 발생하면 기존에 일어나던 이벤트를 없애고
  // form을 인자로 넣어 onSubmit 함수를 실행시킨다
  // form 초기화한다.
  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>
  )
}

export default MyForm;


--------------------------------------------------------------- Forms.tsx

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

function App() {
  const onSubmit = (form : {name: string; description: string;}) => {
    console.log(form)
  }

  return (
    <MyForm onSubmit={onSubmit}/>
  );
}

export default App;