[React] useForm

회사 프로젝트 코드에 watch, register, trigger 등등.. 처음 접해본 코드를 보고 정리를 해야겠다고 마음 먹었다 😋

form 형식의 페이지를 만드는 것은 생각보다 번거로운 작업이 많다.
form의 갯수에 맞게 state 관리를 해야하고, reset이 필요하면 state 갯수만큼 초기화를 한다.
값의 검증이나 onChange 이벤도 상태의 수 만큼 만들어줘여한다.
→ 유사한 코드 반복

useForm 🧐

• form을 쉽게 처리해주는 커스텀 훅이다
• 값의 변경, submit, 조회, 오류 검출 등 form에 필요한 모든 상태를 useForm으로 한번에 처리 가능

npm install react-hook-form 

공식 사이트 예제

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

export default function App() {
  const { register, handleSubmit, watch, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);

  console.log(watch("example")); // watch input value by passing the name of it

  return (
    /* "handleSubmit" will validate your inputs before invoking "onSubmit" */
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* register your input into the hook by invoking the "register" function */}
      <input defaultValue="test" {...register("example")} />
      
      {/* include validation with required or other standard HTML validation rules */}
      <input {...register("exampleRequired", { required: true })} />
      {/* errors will return when field validation fails  */}
      {errors.exampleRequired && <span>This field is required</span>}
      
      <input type="submit" />
    </form>
  );
}

• example, exampleRequired라는 이름을 가진 2개의 input
• 개별로 관리하는 것이 아니라, useForm을 통해 함께 관리

✓ useForm

 useForm({
  defaultValues: {
    firstName: '',
    lastName: ''
  }
})

• defaultValues를 넘겨주면 초기화된 값을 받아올 수 있다

✓ register

<input defaultValue="test" {...register("example")} />

• 상태를 변경하기 위해 사용하는 함수
• onChange, onBlur, ref, name을 가지고 있다.
• 매개변수를 통해서 해당 form의 onChange..등 을 넘겨준다.

...register("example", {
    /* 많은 옵션 가능 */
})

a. required - 필수 요소
값이 true면, submit 이벤트가 발생할 때 값이 비어있다면 error를 받아온다.

b. maxLength - input의 최대길이

c. pattern - 정규 표현식을 넘겨야한다. input 값이 해당 표현식에 통과하지 않으면 error를 받아온다

이 외에도 많은 옵션이 있다.

✓ handleSubmit

<form onSubmit={handleSubmit()}>
</form>

• submit 이벤트를 할당시켜주는 함수
• 매개변수 form에 넘겨주면 내부족으로 useForm 값을 확인하고 함수 실행

✓ watch

watch('example')

• form에서 값을 조회할 때 사용
• 매개변수로 input의 명칭을 넣어주면 해당 값 반환
• 빈 값만 사용하면 모든 form값 반환

✓ formState

• form의 다양한 상태를 return
• 가장 많이 사용하는 것이 errors

register 통해 설정한 값이 handleSubmit 통해 통과되지 않으면 errors를 통해
해당 상태의 명, 에러 종류를 받을 수 있다.