[React] react-form-hook과 yup

react-form-hook 의 공식 예제들을 보면 컴포넌트들에 validation 설정과 에러메세지들이 주렁주렁 달려있는걸 보게 된다.

      <input {...register("firstName", { required: true, maxLength: 20 })} />
      <input {...register("lastName", { pattern: /^[A-Za-z]+$/i })} />
      <input type="number" {...register("age", { min: 18, max: 99 })} />
      <input {...register("mail", { required: "Email Address is required" })} />
      <p>{errors.mail?.message}</p>
      <input type="submit" />
...

react 하면서 좀 지저분하다고 느낀 부분이 html render 부분에 로직이 많이 들어가고 jquery 사용하는 느낌이랄까...

그래서 yup을 같이 쓴 걸 보고 이거다 싶었다.

https://www.npmjs.com/package/yup

yup은 이름이 직관적이지 않다. 

'Yup is a JavaScript schema builder for value parsing and validation'

 

이번에 개발하면서 좀 복잡했던 패스워드 validation를 정리해봤다.

패스워드 조건은 

const passwordErrMsg = '비밀번호는 영문+숫자 조합 10자리 이상 20자리 이하로 입력해주세요'

password: yup
    .string()
    .required('비밀번호를 입력해주세요')
    .min(10, passwordErrMsg)
    .max(20, passwordErrMsg)
    .matches(/^(?=.*[0-9]+)[a-zA-Z][a-zA-Z0-9]+$/, passwordErrMsg)
    .test('validPassword', '키보드 배열상 연속된 문자열은 사용할 수 없습니다', value => {
      return value ? !pwContinueKeyboard(value as string) : true
    }),

키보드 배열 연속은 function을 구현해서 설정했다. 

계속 테스트 해보고 있는데 /^(?=.*\d+)(?=.*[a-zA-Z])[0-9a-zA-Z]{10,20}$/ 가 맞는듯

정규식 어려워

 

누군가에게 도움이 되면 좋겠군