설치

$ npm i react-hook-form

useForm()

useForm은 쉽게 양식을 관리하기 위한 사용자 정의 Hook입니다. 사용 시 선택적 인수(Optional Props)가 필요합니다. 다음 예는 모든 인수와 기본값을 보여줍니다.

useForm({
  mode: 'onSubmit',
  reValidateMode: 'onChange',
  defaultValues: {}, // 선언 시 useForm()이 반환하는 값들에 초기값을 지정할 수 있다.
  resolver: undefined,
  context: undefined,
  criteriaMode: "firstError",
  shouldFocusError: true,
  shouldUnregister: false,
  shouldUseNativeValidation: false,
  delayError: undefined
})

Example

import { useRecoilValue, useSetRecoilState } from 'recoil';
import { useForm } from 'react-hook-form';

interface IForm {
  toDo: string;
}

function CreateToDo() {
  const setTodos = useSetRecoilState(toDoState);
  const category = useRecoilValue(toDoCategory);

  const { register, handleSubmit, setValue } = useForm<IForm>({
		defaultValues: {
			toDo: 'fkdl',
		}
	});
  const onSubmit = ({ toDo }: IForm) => {
    setTodos((prevTodo) => {
      const newTodos = [...prevTodo, { text: toDo, id: Date.now(), category }];
      localStorage.setItem('todos', JSON.stringify(newTodos));
      return newTodos;
    });
    setValue('toDo', '');
  }
  
  return (
    <div>
      <form onSubmit={ handleSubmit(onSubmit) }>
        <input {...register('toDo', { required: "Please write text...", maxLength: 10 })} placeholder="write your name..." autoComplete="off" />
        <button>Add</button>
      </form>
    </div>
  );
}

export default CreateToDo;

register

handleSubmit

watch

formState

setError

setValue

React Hook Form 사용법

React Hook Form 사용법 완결판 - 고급편