[React] typescript 환경에서 form 만들기

이 form을 만드는게 꽤나 귀찮은 일이라는 것을 알았다.
대충 만들면 다 될 줄 알았는데...
이것저것 적어줘야하는게 많다고 느꼈다.

1. 값을 저장할 state를 만들고 input에 연결한다.

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

  return (
    <form>
      <input value={value} placeholder="입력하세요"></input>
      <button>제출</button>
    </form>
  );
}

2. onChange를 만들고 input과 연결한다.

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

  return (
    <form>
      <input onChange={onChange} value={value} placeholder="입력하세요"></input>
      <button>제출</button>
    </form>
  );
}

onChange 함수 자세히 보기

const onChange = (event: React.FormEvent<HTMLFormElement>) => {
  //React.FormEvent<HTMLFormElement>는 타입스크립트 환경에서만 사용.
    const {
      currentTarget: { value },
    } = event;
  //구조분해할당
    setValue(value);
  //setValue(event.currentTarget.value)와 동일함.
  };

3. onSubmit을 만들고 form과 연결한다.

function ToDoList() {
  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 (
    <form onSubmit={onSubmit}>
      <input onChange={onChange} value={value} placeholder="입력하세요"></input>
      <button>제출</button>
    </form>
  );
}