react hook form과 yup로 form 검사까지 쉽게 사용하기

useForm

useForm에 어떤 값을 주고 사용할건지 인터페이스 작성

resolver: yupResolver(schema.adminProductTestSchema)

resolver로 yep 사용

하위컴포넌트에 같이 사용하기 위해서 useForm 구조분해할당 안하고 methods로 선언,

폼 사용되는 하위 컴포넌트들 FormProvider로 감싸고 FormProvider에 methods 프롭스로 내려주기

yup.object에 검사할 코드 작성(Validation 파일에 yup코드 따로 작성해서 가독성 높임)

 

yup

validation 먼저 설정

yup.setLocale에 에러메시지 선언, 에러 난 경우 여기 있는 메시지가 출력됨

mixed와 number을 나눈 이유는 잘 모르겠지만 required가 펄스일때 해당 작성해둔 에러메시지를 띄운다.

 

yup.setLocale({
  mixed: { required: '필수 입력'},
  number: { positive: '양수값을 입력해주세요', max: '999이하로 입력해주세요'}
});

 

.test()의 경우 yup기본적인 예제들처럼 일반적인 test(name, message, test: function)형태로 작성

.test('contains-spaces', FIRST_LAST_SPACES_VALID_TEXT, (val: string | undefined) => {
  if (!val) return true; // 필수사항이 아니어서 val이 비어있어도 이 검사 통과
  return !regex.firstLastSpace.test(val); // 여기서 본격 검사 후 트루 or 펄스 리턴
});

 

글자 수 세는 경우는 최대, 최소 글자가 요구하는 양식마다 다르기 때문에 매개변수로 받기

REQUIRED_TEXT_LENGTH: ({ minLength, maxLength }: { minLength: number; maxLength: number }) =>
    yup.string().required().min(minLength, MORE_TEXT(minLength)).max(maxLength, LESS_TEXT(maxLength))

 

컴포넌트를 분리했기 때문에 하위 컴포넌트에서는 useFormContext를 이용해서 속성에 접근한다.