[react]React Hook Form 사용기

React Hook Form 라이브러리

React Hook Form 라이브러리는 form과 input을 관리하기 쉽게 해준 hook 형태의 라이브러리이다. 기존의 component 형태의 라이브러리는 많이 사용해봤지만, 기본 html element에 hook을 적용하는 형식의 라이브러리는 처음이다.

React Hook Form 설치해주기

npm install react-hook-form

useForm 사용하기

useForm hook을 사용해서 register, handleSubmit, formState 을 불러온다.

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

//특정 component 내부
const { register, handleSubmit, formState: { errors } } = useForm();

register 함수

register() : 실행결과 React ref 를 리턴해주어 해당 input element를 ref 에 등록해준다. 파라미터로 ref의 이름을 문자열로 받고, 다양한 옵션을 포함한 options 객체를 받는다.

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

// 같은 결과
//<input name="test" ref={test_ref} />

다양한 옵션들

<input
  {...register("test", {
    **required**: 'error message',
		**maxLength**: {
        value: 20,
        message: '아이디가 너무 깁니다.'
    },
    **pattern**: {
        value: username_reg,
        message: '알파벳만 포함하시길 바랍니다.'
    }
  })}
/>

기본적으로 옵션 객체는 value 와 message 로 이루어져 있다. value 는 특정 validation을 수행하는 기준값을 설정하며, message 는 validation이 실패했을 때 formSatet.errors 에 message 값으로 들어간다.

• required - 보통은 true, false 로 구분해도 되지만, 문자열의 경우 에러메세지로 들어간다.
• maxLength - input에 들어가는 값의 최대길이를 설정할 수 있다.
• pattern - regx 패턴으로 validation의 기준을 설정할 수 있다.

handleSubmit 함수

handleSubmit(callback Func) : input에 담긴 값들을 register에서 등록한 기준에 따라 validation을 해준다. handleSubmit 은 콜백함수를 파라미터로 받는데, validation check가 성공하면 이 콜백함수를 실행시킨다. 나는 콜백함수를 서버에 데이터를 보내는 함수를 정의해서 전달했다.

handleSubmit() : validation 검증 → 콜백함수 : 검증된 데이터 서버에 전달

ErrorMessage 컴포넌트

register에서 등록한 validation 기준에 따라 handleSubmit 가 validation을 해주고 이 때 발생한 에러는 register 에서 등록한 message 에 따라 formState.errors 에 저장된다.

이를 ErrorMessage 컴포넌트를 사용하면 매우 쉽고 내가 원하는 디자인의 에러메세지를 만들 수 있다.

ErrorMessage 컴포넌트를 사용하기 위해 이를 설치해주자.

npm install @hookform/error-message

<ErrorMessage
  errors={errors}
  name="username"
  render={({ message }) => <p style={styles.errorText}>{message}</p>}/>

• errors - useForm hook 에서 정의한 formstate.errors 를 넘겨준다.
• name - register로 등록한 ref의 이름. errors 중에서 해당 ref와 연결된 message만 찾아준다.
• render - 에러메세지를 출력하고 싶은 아이템을 전달해준다.