zod와 react hook form으로 사용자의 입력값 유효성 검사하기

1. `formProvider`를 사용해 `props drilling` 없이 `form`의 상태 공유가 가능하다.
2. native form validation을 제공한다.
3. 용량이 작고 dependency가 없다.
4. form validation을 위한 표준 HTML을 기반으로 만들어졌다.
5. Yub, Zod 혹은 커스텀 validation과 함께 쓸 수 있다.
6. devTools를 제공한다.

1. 값 입력받기 -> 사용자로부터 아이디와 비밀번호 값을 `input`으로 입력받아야 합니다.
2. 유효성 검사 -> 입력받은 값이 유효한지 검사해야 합니다.
3. 유효성 검사 피드백 전달 -> 유효성 검사의 피드백을 UI로 전달해야합니다.

import { ErrorMessage } from '@hookform/error-message';

// ...

const {
  formState: { errors },
} = useFormContext();

// ...
<span className={cx('input-field-err-msg')}>
  <ErrorMessage errors={errors} name={name} render={({ message }) => <p>{message}</p>} />
</span>;

<input
  {...register(name, {
    required: isRequired ? 'This is Required.' : errorMessage?.empty,
    pattern: {
      value: regex, // constansts에 저장해둔 regex pattern
      message: errorMessage?.invalid, // constansts에 저장해둔 에러메시지 문자열
    },
    minLength: name === 'password' && {
      // input의 name이 password면(= 비밀번호 입력 input이면)
      value: 8, // 8자 제한
      message: 'Please write at least 8 characters', // validation 검사 실패시 에러메시지
    },
  })}
  {...props}
/>

1. <input>의 코드가 매우 길어진다. -> 코드 가독성이 떨어진다.
2. validation 로직과 input의 UI가 섞인다. -> 코드 가독성과 유지보수성이 떨어진다.
3. 복잡한 검증 로직은 작성하기 어렵다. -> validate를 사용할 수 있긴하지만, 복잡한 로직까지는 작성이 어렵다고 느꼈다.

1. Zero dependencies
2. Works in Node.js and all modern browsers -> Node.js를 비롯한 모든 모던 브라우저에서 작동한다.
3. Tiny: 8kb minified + zipped -> 8kb라는 작은 용량!
4. Immutable: methods (e.g. .optional()) return a new instance -> 메서드를 호출할 때마다 원본 객체를 변경하지 않고 새로운 객체를 반환하여 불변성을 지킨다.
5. Concise, chainable interface -> 메서드 체이닝을 통해 여러 메서드를 연결해서 사용할 수 있다.
6. Functional approach: parse, don't validate -> 데이터를 검증(validate)하기보다는 파싱(parse)하는 함수형 프로그래밍 접근 방식을 따른다.
7. Works with plain JavaScript too! You don't need to use TypeScript.

const SigninSchema = z.object({
  email: z
    .string() // 문자열
    .min(1, { message: ERROR_MESSAGE.email.min }) // 최소 1자 이상
    .email({
      message: ERROR_MESSAGE.email.regex, // email regex
    }),
  password: z
    .string() // 문자열
    .min(8, { message: ERROR_MESSAGE.password.min }) // 최소 8자 이상
    .regex(REGEX.password, ERROR_MESSAGE.password.regex), // password regex
});

const methods = useForm({
  mode: 'all',
  resolver: zodResolver(SigninSchema),
});

<FormProvider {...methods}>
  <form className={cx('signin-form')} onSubmit={methods.handleSubmit(handleSigninSubmit)}>
    <fieldset className={cx('fieldset')}>
      <legend>회원가입 정보 등록</legend>
      <AuthInputField
        label='Email'
        name='email'
        type='email'
        placeholder='Type your email'
      />
      <AuthInputField
        label='Password'
        name='password'
        type='password'
        maxLength={15}
        placeholder='Type your password'
      />
      <BaseButton
        type='submit'
        theme='fill'
        size='large'
        isDisabled={!isValid}
        isQuantico
      >
        Match Now
      </BaseButton>
    </fieldset>
  </form>
</FormProvider>

1. 타입 안전성을 보장할 수 있다.
2. 스키마를 활용해 보다 강력하게 데이터 검증이 가능하다.
3. 복잡한 데이터 구조나 검증 로직을 정의할 수 있다.
4. 스키마를 다양한 곳에서 재사용할 수 있다.
5. validation 로직과 view를 분리할 수 있다. -> 코드 가독성, 유지 보수성 향상
6. validation의 구체적인 내용을 직관적으로 파악할 수 있다.