React Hook Form

React Hook Form

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

사용하기 쉬운 유효성 검사를 통해 성능이 뛰어나고 유연하며 확장 가능한 form입니다.

const {
register,
handleSubmit,
formState: { errors },
} = useForm();

<input {...register('lastName', { required: true })} />

register: (name: string, RegisterOptions?) => ({ onChange, onBlur, name, ref })
이 메서드를 사용하면 input을 등록하거나 element를 선택하고 유효성 검사 규칙을 React Hook Form에 적용할 수 있습니다.
유효성 검사 규칙은 모두 HTML 표준을 기반으로 하며 사용자 지정 유효성 검사 방법도 허용합니다.

watch: (names?: string | string[] | (data, options) => void) => unknown
input의 변화를 구독합니다. 이 메서드는 지정된 input을 감시하고 해당 값을 반환합니다. input 값을 렌더링하고 조건에 따라 무엇을 렌더링할지 결정하는 데 유용합니다.

handleSubmit: ((data: Object, e?: Event) => void, (errors: Object, e?: Event) => void) => Function

이 함수는 form 유효성 검사가 성공하면 form 데이터를 받습니다.

const { register, handleSubmit } = useForm();
const onSubmit: SubmitHandler = data => console.log(data);

form onSubmit={handleSubmit(onSubmit)}

setError:(name: string, error: FieldError, { shouldFocus?: boolean }) => void
이 함수를 사용하면 하나 이상의 오류를 수동으로 설정할 수 있습니다.
(수동으로 input 오류 설정)

shouldFocus?: boolean
오류를 설정하는 동안 input에 focus을 맞춰야 합니다.
input이 비활성화되면 shouldFocus가 작동하지 않습니다.

validate: Function | Object

validate: value => value === '1'

validate: {
positive: v => parseInt(v) > 0,
lessThanTen: v => parseInt(v) < 10,
checkUrl: async () => await fetch(),
}

clearErrors: (name?: string | string[]) => void
이 함수는 form의 오류 메세지를 수동으로 지울 수 있습니다.
setError()로 설정한 메세지를 삭제할 수 있습니다.

clearErrors('username');
onClick={() => clearErrors(["firstName", "lastName"])}

setValue: (name: string, value: unknown, config?: Object) => void
필드 값을 업데이트
이 함수을 사용하면 등록된 필드의 값을 동적으로 설정하고 form state를 확인하고 업데이트하는 옵션을 가질 수 있습니다. 동시에 불필요한 rerender를 피하려고 합니다.

setValue('firstname', 'hello');
onClick={() => setValue("firstName", "Bill")}

reset: (values?: Record, options?: Record) => void
form state와 value 재설정
전체 form state 또는 form state의 일부를 재설정합니다.

reset() // form 전체 리셋
reset({ email: "" }); // form에서 특정 필드만 리셋

Grip 개인과제에서 쓴 코드

interface ISearchForm {
  keyword: string
}

const { register, handleSubmit, setValue } = useForm<ISearchForm>()

const onSubmit = ({ keyword }: ISearchForm) => {
    handleToggleSeachOpen()
    addSearchRecents(keyword)
}
return (  
  <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('keyword') />
  </form>
)