[TIL] ReactJS - useForm 사용하기

오늘 공부한것 & 기억하고 싶은 내용

useForm이란?

• submit-data validation을 손쉽게 해주는 hook을 제공하는 라이브러리

• React Hook Form은 리액트에서 form으로 작업하기에 가장 좋은 방법이다. 만약 input이 하나 밖에 없다면 그리 필요하지 않을 수 있음.
• Hook form을 사용하지 않은면 많은 state를 작성해야 함.
  검증차원에서도 유리함.
• react hook form 을 사용하기 위해 useForm이라는 hook을 import 해야함(설치 필수)

  npm install react-hook-form

• useform의 register 함수를 사용하면 onchange 이벤트 핸들러가 필요 없음. 따라서 props도 필요없고, setState도 필요없음
• onBlur 이벤트는 화면의 바깥쪽(focus에서 벗어난 상태)을 말함.
• iput에 register의 속성 그 자체를 복사 해줌.
• useForm의 watch 함수는 변화를 관찰할 수 있게 해줌.
• Component내부에 스프레드 연산자로 객체를 풀어줌으로써, 모든 데이터를 집어넣어줄 수있다.

import { useForm } from "react-hook-form";
const {register, watch} = useForm();

//기존코드
function ToDoList() {
  const [toDo, setToDo] = useState("");
  const [toDoError, setToDoError] = useState("");
  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
    const {
      currentTarget: { value },
    } = event;
    setToDoError("");
    setToDo(value);
  };
  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (toDo.length < 10) {
      return setToDoError("To do should be longer");
    }
    console.log("submit");
  };
  return (
    <div>
      <form onSubmit={onSubmit}>
        <input onChange={onChange} value={toDo} placeholder="Write a to do" />
        <button>Add</button>
        {toDoError !== "" ? toDoError : null}
      </form>
    </div>
  );
}


//useForm 훅 사용
function ToDoList() {
  const { register, watch } = useForm();
  console.log(watch());
  return (
    <div>
      <form>
        <input {...register("email")} placeholder="Email" />
        <input {...register("firstName")} placeholder="First Name" />
        <input {...register("lastName")} placeholder="Last Name" />
        <input {...register("username")} placeholder="Username" />
        <input {...register("password")} placeholder="Password" />
        <input {...register("password1")} placeholder="Password1" />
        <button>Add</button>
      </form>
    </div>
  );
}

코드가 엄청 줄었다..... 굿

배운점 & 느낀점

리액트를 배우면서 input value, onChange, onSubmit 등 입력값을 가지고 useState하는 작업을 많이 했는데, 또 또 신개념 useForm을 알게 되어 코드가 많이 줄었다.
훅이란 녀석들은 참 대단한거 같다.
많이 축약된 만큼 더 공부해야겠지만 그 많던 코드들이 저렇게 줄어드는게 신기할 따름...
계속해서 form에 대해서 공부해야겠다.( 에러, 검증 등)