React Hook Form

validation, 에러, 이벤트 등 필요한 기능을 넣어 form 을 만드는 것을 도와주는 패키지이다.

이 패키지 없이 직접 로그인 input 을 만들고 유효성 검사를 하려면 다양한 에러상황에 대해 일일히 대응해줘야한다. 관리해야할 상황도 많아진다. form에 대한 사용자 경험을 쾌적하게 제공하려면 아주 많은 경우에 대응해야하고 코드가 복잡해진다. 복잡한 코드를 간소화 하면서 form 을 쉽게 만들 수 있도록 도와주는 패키지라고 할 수 있다.

설치 및 상태 등록

npm i react-hook-form

• 유효성 검사를 위한 form 을 만들기 위해서는…

1. 각 form 의 value 에 해당하는 상태와, input 의 value 변화를 추적하는 이벤트를 만든다.
2. form 을 위한 submit 함수를 만들고, submit 함수 내부에서 input 들의 상태와 유효성 검사 통과 기준이 맞는지 맞지 않는지 체크한다.
3. input 이 비거나, 입력한 값이 규칙에 맞지 않는 경우 에러메시지를 출력한다.

useForm Hook

• 이를 위해서 react-hook-form 에서 제공하는 useForm hook 을 사용한다. useForm Hook 에서 form 을 편리하게 작성하기 위한 모든 함수들이 제공된다.

register 함수와 handleSubmit 함수

• register 란 말그대로 등록하는 것, form 의 각 input에 상태와 이벤트 등을 만들어주어야 하는데 이 과정을 register 함수로 한번에 할 수 있도록 해준다. 여러줄의 코드를 단 한 줄로 줄일 수 있다.
• handleSumit 함수도 이름처럼 submit 을 담당하는 함수이다. submit 버튼을 눌렀을 때 정해진 규칙에 맞는지 맞지 않는지 유효성을 체크하고 정해진 행동을 한다.

// 우리의 form 을 위한 새로운 타입 규칙 (인터페이스)를 만들어준다.
interface LoginForm {
  username: string;
  password: string;
  email: string;
}

// useForm 을 불러오면서 아래와 같이 정의해준다. 
const {register, handleSubmit} = useForm<LoginForm>();

register 함수 사용해보기

• register 로 email 에 해당하는 input에 value와 event 같은 속성 값을 추가해보자. register 함수가 전달받은 인자를 통해 객체를 생성하므로, input 요소 안에 아래와 같이 작성하면…

{...register('email', {required: '이메일을 입력해주세요.'})}

• 이렇게 알아서 객체를 생성해주기 때문에 spread syntax 로 각 속성 값을 한 줄의 코드로 적용할 수 있게 된다!
• 참고로 두 번째 인자로 전달 하고 있는 객체를 통해서 유효성 검사 규칙을 만들어 줄 수 있는데, 일반적으로 html 속성으로 적용할 수 있었던 required 나 minLength, maxLength 등이 포함된다.

{...register('username', {
  required: 'Username을 입력해주세요.',
  minLength: {
    message: 'Username 은 5글자 이상이어야 합니다.',
    value: 5,
  },
})}

• Validation Rule 을 추가하면서 message 와 value를 같이 넘겨주면, minLength 즉 5글자가 되지 않는 규칙 위반이 발생할 때 해당 메시지를 활용할 수 있게 된다.

handleSubmit 함수 사용해보기

• submit 에 사용되는 함수이기 때문에 form 에 onSubmit 이벤트 콜백함수로 전달할 필요가 있다. 이 때 특이한 것은 handleSubmit 함수 자체를 전달하는 것이 아니고, handleSubmit 함수에 유효성검사에 필요한 1 ~ 2개의 함수 인자를 전달하여 호출된 결과값을 콜백함수로 한다.

<form onSubmit={handleSubmit(onValid, onInvalid)}>

• onValid 는 말그대로 유효성 규칙을 모두 통과했을 때, 정상적인 상태일 때 실행되는 함수이고, 두 번째 인자인 onInvalid 는 그 반대 상황에서 실행되는 함수이다. onValid 는 필수, onInvalid 는 옵셔널이다.
• 전달이 될 두 함수를 가지고 실질적으로 어떤 일이 일어나야 하는지 정의할 수 있다. 일단 정의하고 전달하는 것 만으로도 해당 form 이 유효한지, 유효하지 않은지를 판단하기 때문에 유효한지, 유효하지 않은지에 대해서는 register 함수에서 규칙만 잘 전달해주면 된다.

// 두 함수를 정의하고 전달하면, form 의 규칙이 모두 만족했을 때 onvalid 가
// 그렇지 못할 때 onInvalid 가 실행된다.
const onValid = (data: LoginForm) => {
    console.log('valid');
  };

// onInvalid 에서는 현재 조건을 충족하지 못한 input이 어떤 인풋인지 객체로 출력한다.
const onInvalid = (errors: FieldErrors) => {
  console.log(errors);
};

Validation 규칙 추가

// formState 의 errors와 mode 추가설정
// formState 를 가지고 form 의 상태에 대한 추가 정보를 얻을 수 있음. 
const {
    register,
    handleSubmit,
    formState: {errors},
  } = useForm<LoginForm>({
    mode: 'onChange',
  });

<input
{...register('email', {
  required: '이메일을 입력해주세요.',
  // validate 옵션을 추가해서 사용자 지정 유효성 규칙 추가.
  // 이 때 리턴하는 값이 message 가 된다.
  validate: {
    notGmail: value =>
      !value.includes('@gmail.com') || 'Gmail은 사용 불가입니다.',
  },
})}

// 아래와 같이 errors 객체 안에 유효성 통과가 되지 않은 email 속성이 추가되어 있다면
// 해당하는 메시지를 화면에 출력할 수도 있다.
// 이 속성의 존재 여부에 따라 클래스를 추가해 스타일링도 가능.
{errors.email?.message}

• 이 외 추가적인 내용은 공식 문서를 참조.