React Hook Form을 사용해보자

React Hook Form이란 뭘까?

공식 문서에는 유연하고 확장 가능한 사용하기 쉬운 고성능 폼 검증 라이브러리라고 소개되어 있다.

• 작성하는 코드 양이 줄어든다
• 컴포넌트의 리랜더링을 분리할 수 있다.
  - 여러 input의 상태를 관리해야 할 때 전체 폼이 리랜더링되지 않게 관리할 수 있다.
• 유효성 검사에 탁월하다
• TypeScript를 기본적으로 지원한다
• hook기반이기 때문에 제공하는 useForm hook을 통해 거의 모든 기능을 사용할 수 있다.

시작해봅시다.

React Hook Form을 설치하는 커맨드는 간단합니다.

npm install react-hook-form //npm 사용

yarn add react-hook-form //yarn 사용

Register

useState대신에 쉽고 적은 코드로 input 값을 가져 올 수 있습니다.

export default function App() {
  const { register } = useForm();
  
  return(
    <input {...register("username")} />
  	<input {...register("password")} />
  );
}

register를 통해서 user name이라는 이름으로 name 필드를 바로 사용할 수 있고 value, onChange 기능이 register 하나로 처리될 수 있습니다.

만약 내가 작성하고 있는 input의 값을 알고 싶다면?

export default function App() {
  const { register, watch } = useForm();
  
  console.log(watch()); //입력받고 있는 input의 모든 value
  console.log(watch("username")); // username 필드의 input value
  console.log(watch("password")); // password 필드의 input value
  
  return(
    <input {...register("username")} />
  	<input {...register("password")} />
  );
}

watch를 통해서 input 필드의 value 값을 가져올 수 있습니다.

유효성 검사

input 값의 유효성 검사는 formState의 errors 객체로 쉽게 확인할 수 있습니다.
오류가 생긴 input 필드로 자동 focus가 잡히는 것도 확인할 수 있습니다

export default function App() {
  const { register, watch, formState : {errors}} = useForm();
  
  cons
  return(
    <input {...register("username", {required : true, minLength : { value : 10, message : "10글자 이상 입력해주세요"})} />
  	<input {...register("password"), {required : true} />
  );
}

handleSubmit

지금까지 form의 onSubmit 할 때 페이지 re-load를 막기 위해서 e.preventDefault를 사용해 왔습니다.
하지만 handleSubmit을 사용하면 e.preventDefault가 필요 없습니다.

export default function App() {
  const { register, watch, formState : {errors}, handleSubmit} = useForm();
  
  const onSubmit = (data) => {
    console.log(data);
  }
  
  return(
    <form onSubmit = {handleSubmit(onSubmit)}>
 		<input {...register("username", {required : true, minLength : { value : 10, message : "10글자 이상 입력해주세요"})} />
  		<input {...register("password"), {required : true} />
      </form>
  );
}

form을 제출할 onSubmit 함수를 handleSubmit으로 감싸주면 끝입니다.

handleSubmit을 통해 onSubmit 함수는 data를 인자로 받을 수 있고 data를 통해서 form으로 관리되는 data를 확인할 수 있다.

결론

register, handleSubmit, formState 말고도 여러 가지 api들이 있다.
여러 개의 input 상태를 관리해야 할 때 쓰기 좋을 것 같다.

---

출처

react-hook-form