React Hook Form 기본 사용법 익히기


✔️ React Hook Form 설치

yarn add react-hook-form
// or
npm install react-hook-form


useForm() 살펴보기

React Hooks Form을 적용하고 싶다면 먼저 useForm()이라는 hook을 불러와야한다

React Hooks Form의 거의 모든 기능은 이 hook에서 나오는데, 그 중 몇 가지만 알아도 React Hooks Form의 대부분의 기능을 사용할 수 있

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

const {
  register, // input에서 값을 불러오기 위한 함수
  handleSubmit, // React-Hook-Form에서 Submit을 관리하기 위해 만든 함수
  watch, // input에서 입력하는 값을 실시간으로 확인하기 위한 함수
} = useForm<InputType>();


✔️ register

input에서 값을 불러오기 위한 함수

input 태그에 {...register('사용하고 싶은 이름')}을 입력한다. 사용하고 싶은 이름은 input 태그의 name의 역할과 비슷하다?!

<input
  type='text'
  placeholder='Todo 제목을 입력해보세요!'
  {...register("title")}
/>


✔️ watch

input에서 입력하는 값을 실시간으로 확인하기 위한 함수

입력한 값을 불러올 땐 watch 함수를 사용.

console.log(watch()); // 콘솔에서 실시간으로 확인 가능


✔️ handleSubmit

React-Hook-Form에서 Submit을 관리하기 위해 만든 함수

handleSubmit은 함수를 인자로 받으며 그 함수에 data를 인자를 넘겨준다.

  • handleSubmit이 넘겨주는 데이터는 watch 함수가 가장 마지막으로 출력하는 데이터


예제) 코드 살펴보기

const TodoCreator: NextPage = (): JSX.Element => {
  const [todos, setTodos] = useRecoilState<TodosTypes[]>(todosState);
  const { register, handleSubmit, watch } = useForm<InputType>();

  const addItem = () => {
    const nextId: number =
      todos.length > 0 ? todos[todos.length - 1].id + 1 : 0;

    const result = watch();
    const todo: TodosTypes = {
      id: nextId,
      title: result.title,
      body: result.body,
    };

    mutate(todo);
    setTodos([...todos, todo]);
  };

  return (
    <form onSubmit={handleSubmit(addItem)}>
      <div className='inputWrap'>
        <input
          type='text'
          placeholder='Todo 제목을 입력해보세요!'
          {...register("title")}
        />
        <input
          type='text'
          placeholder='Todo 내용을 입력해보세요!'
          {...register("body")}
        />
      </div>
      <input className='button' type='submit' value='등록' />
    </form>
  );
};



validation

  • required
    • 예시) <input {...register("firstName", { required: true, maxLength: 20 })} />
  • min
    • 예시) <input type="number" {...register("age", { min: 18, max: 99 })} />
  • max
  • minLength
  • maxLength
  • pattern
    • 예시) <input {...register("lastName", { pattern: /^[A-Za-z]+$/i })} />
  • validate


✔️ 예시 코드

<input
  type='text'
  placeholder='Todo 제목을 입력해보세요!'
  {...(register("title"), { required: true })}
/>