풀스택 웹개발 부트캠프 13주차 (3)

React Hook Form

• 리액트 어플리케이션에서 form을 쉽게 관리
• form의 상태 관리와 유효성 검사를 간단하게 만들어 줌

npm i react-hook-form

register

• 입력 요소에 연결하기 위한 함수
• 입력 요소에 유효성 검사 규칙 설정

handleSubmit

• 폼의 제출을 처리하기 위한 함수
• 두 개의 함수를 받음
  • 하나는 유효할 때 실행되는 함수 (필수)
  • 다른 하나는 유효하지 않을 때 실행되는 함수 (선택)
• 함수의 매개변수로 전달된 콜백 함수는 유효성 검사를 통과한 데이터를 인자로 받아 실행됨

watch

• 특정 폼 필드의 값을 실시간으로 관찰하는 함수

formState

• 폼의 상태를 나타내는 객체
• ex) errors, isValid, isDirty, isSubmited 등

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

function ExampleForm() {
  const { register, handleSubmit, formState: { errors }, } = useForm();
  
  const onSubmit = (data) => {
    console.log(data);
  };
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
    	<input name="example" ref={register({ required: true })} />
        {errors.example && <span>This field is required</span>}
                                   
        <button type="submit">Submit</button>
    </form>
  );
}