[Library] react-hook-form

개요: 'form'을 쉽게 만드는데 유용한 라이브러리

---

사용

• 라이브러리 설치

  npm install react-hook-form

• zod와 결합하여 shema에 저장해둔 유효성 검사를 불러와 Form을 만들어 랜더링부에 도입

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';

const schema = z.object({
  name: z.string().min(1, { message: 'Required' }),
  age: z.number().min(10),
});

const App = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(schema),
  });

  return (
    <form onSubmit={handleSubmit((d) => console.log(d))}>
      <input {...register('name')} />
      {errors.name?.message && <p>{errors.name?.message}</p>}
      <input type="number" {...register('age', { valueAsNumber: true })} />
      {errors.age?.message && <p>{errors.age?.message}</p>}
      <input type="submit" />
    </form>
  );
};

---

의견

• TS 사용 프로젝트에서 Zod와 함께 사용하면 유효성검사를 쉽게 구현할 수 있어 편리하다.
• TS에 자신이 없는데, Zod로 눈에 잘 들어오게 먼저 데이터형식들을 관리하니 TS 오류로 부터 자유로워져서 자신감이 생긴다.
• form 형식을 쉽게 만들어 편리하다

refe: https://react-hook-form.com/