React hook Form

React Hook Form

• react hook으로 form을 쉽게 만들 수 있도록 도와줌

• 설치
  npm i react-hook-form

• 기본 예제

  import React from "react";
  import { useForm } from "react-hook-form";

  Interface Inputs = {
    example: string,
    exampleRequired: string,
  };

  export default function App() {
    const { register, handleSubmit, watch, errors } = useForm<Inputs>({mode: "onChange"});
    const onSubmit = data => console.log(data);
    const onSubmitInvalid = data => console.log(data);

    console.log(watch("example"))

    return (
      <form onSubmit={handleSubmit(onSubmit, onSubmitInvalid)}>

        <input name="example" defaultValue="test" ref={register} />
        <input name="exampleRequired" ref={register({ required: true })} />

        {errors.exampleRequired && <span>This field is required</span>}

        <input type="submit" />
      </form>
    );
  }

• input태그에 name을 설정해 주어야 useForm이 찾을 수 있음
• handleSubmit(onValid, onInValid): form을 submit한 경우 form이 valid할 때, invalid할 때 지정한 function을 수행함
• watch(): 실시간 변화를 감지함
• useForm의 mode
• onChange: 값이 변하고 있을 때 validation검사
• onBlur: input을 벗어났을 때 validation검사

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