React-Hook-Form와 Zod

 

설치 및 임포트

yarn add react-hook-form

'use client'
import { useForm } from 'react-hook-form';

const { register, handleSubmit, formState } = useForm();

 

handleSubmit

form의 onSubmit에 실행하고 싶은 동작을 handleSubmit의 인자로 넣어 준다

const onSubmit = (value: FieldValues) => {
  // form 제출시 실행할 동작
  console.log(value);
};

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

 

 

register

input 태그에 사용

input 태그의 용도를 의미하는 id, 옵션을 넣어준다

옵션 예시는 required (필수인지), pattern (정규식 검증이 필요할 때) 등이 있다

<form>
  <input
    {...register('email', {
      required: true,
      pattern: {
        value: // 정규식
        message: 'invalid email address',
      },
    })}
    type='email'
    placeholder='Email'
    className='text-black'
  />
</form>

 

 

formState

defaultValue

사용자가 입력하기 전 기본적으로 input 태그에 입력되어있을 값을 지정해줄 수 있다

useForm 호출시 초기값으로 defaultValues를 지정해준다

const { register, handleSubmit, formState } = useForm({
  defaultValues: {
    email: '123',
  }
})

 

dirtyFields

defaultValue로 입력해둔 값이 변경되었는지, 아닌지 확인할 수 있는 값

useForm 호출시 mode를 지정해준다

여기서 mode는 폼에 입력되는 값을 validate하거나 트래킹하는 시점을 지정한다

const { register, handleSubmit, formState } = useForm({
  mode: 'onChange',
  defaultValues: {
    email: '123',
  }
})

formState.dirtyFields에서 각 필드가 수정되었는지, isDirty에서 전체 중 수정된 값이 있는지 확인할 수 있다

 

mode 예시

1) onChange: input field에 변화가 생길 때마다

2) onBlur: input field에서 벗어날 때마다

errors

필드에 에러를 일으키는 값이 입력되면 필드가 리렌더링되면서 어떤 에러가 발생하는지 반환한다

활용 예시! input 태그에 유효성검사 결과를 그 때 그 때 반환하고 싶은 경우 사용할 수 있다

검사할 기준이 되는 값과 오류 메세지는 register에서 옵션으로 설정해줘야하며, error로 인한 리렌더링은 설정해둔 조건에 해당하는 변화가 있을 때 발생한다

(required에 한정해서: email 필드가 비었을 때 -> 리렌더링, 한글자 작성했을 때 -> 리렌더링, 한글자 더 작성했을 때 -> 조건에 해당하는 변화가 아니므로 리렌더링 X)

<form>
  <input
    {...register('email', {
      required: {
        value: true,
        message: 'email required',
      },
      pattern: {
        value: // 정규식
        message: 'invalid email address',
      },
    })}
    type='email'
    placeholder='Email'
    className='text-black'
  />
  {formState.errors.email && (
    <span>{formState.errors.email.message}</span>
  )}
</form>

 

isValid

폼에 입력된 값들이 유효한지 확인할 수 있는 값

아래와 같이 활용하여 입력된 값이 유효하지 않을 때는 제출 버튼을 비활성화 시키는 등 활용할 수 있다

<form>
  <input/>
  <button
    disabled={!formState.isValid}
    type='submit'
  >제출하기</button>
</form>

 

 

Zod

타입 검증 라이브러리, 타입스크립트를 기반으로 검사해준다

 

설치

yarn add zod

 

스키마

객체가 어떻게 구성되어있는지 정의

zod에서 z를 받아와 정의할 수 있다

import { z } from 'zod';

const signInSchema = z.object({
  email: z.string().email({ message: 'invalid email' }),
  password: z.string();
});

 

타입 검증

위처럼 정의한 스키마로 우리가 사용할 객체가 알맞은 타입으로 구성되어있는지 확인할 수 있다

const onSubmit = (value: FieldValues) => {
  console.log(signInSchema.parse(value));
};

parse가 통과한 경우에는 입력된 값 자체를 반환하고, parse를 통과하지 못한 경우는 zodError를 반환한다

타입스크립트는 빌드하면서 자바스크립트로 변환되기 때문에 예기치못한 타입 오류는 잡아내기 어려울 수 있다.

하지만 Zod는 런타임에서도 타입 에러를 잡을 수 있게 해줌

 

 

resolver

hookform을 사용해 input에 조건들을 따로 정의하지 않아도, zod 스키마와 연동되게 하고싶은 경우 사용할 수 있다.

 

설치

yarn add @hookform/resolvers

 

react hook form과 함께 사용하기

const signInSchema = z.object({
  email: z.string().email({ message: 'invalid email' }),
  password: z.string(),
});

const signInForm = () => {
  const { register, handleSubmit, formState } = useForm({
    mode: 'onBlur',
    resolver: zodResolver(signInSchema),
  })
}

useForm 호출시 어떤 스키마의 타입을 사용할건지 인자로 넣어준다

이제 input에 있던 register의 옵션들은 지워줄 수 있다

 

<form>
  <input
    {...register('email')}
    placeholder='Email'
    className='text-black'
  />
  {formState.errors.email && (
    <span>{formState.errors.email.message}</span>
  )}
</form>