[React] react-hock-form 란? react-hock-form+yup : validation check Example

react-hock-form

• React에서 form의 validation 체크를 도와주는 라이브러리
• 불필요한 렌더링을 줄여준다.
• 코드가 단순해서 생상성이 증가한다.

yup

• react-hock-form이랑 함께 사용 가능한 validation 라이브러리

 

react-hock-form, yup 설치

npm install react-hook-form
npm install yup

 

 

react-hock-from + yup 사용 예

• FormProvider로 react-hock-form을 사용할 영역을 감싸준다.
• yup을 통해 validation을 체크할 yupResolver 객체를 생성
• useform
  
  • register : react-hock-form과 연결할 때 사용한다.
  • watch : react-hock-form의 변경을 감지한다.
  • handlesubmit : FormProvider의 내부의 값을 submit 한다.
  • formState : react-hock-form이 가지고 있는 값을 확인할 수 있다.
  • setValue : react-hock-form value 값을 세팅한다.
  • getValue: react-hock-form의 value 값을 얻어온다.

 

ex) TextInput

// register를 통해 react hock form 과 연결해줌
function TextInput({ name }: { name: string }) {
  const {
    register,
    formState: { errors },
  } = useFormContext();

  return <input {...register(name)} />;
}

 

ex) JoinMemberTemplate

import ...

export interface UserSignUpBffRequest {
  userId: string;
  password: string;
  userName: string;
  email: string;
  mobileNumber: string;
  agreeTermsService: boolean;
}

export interface JoinMemberTemplateProps {
  onSubmit: SubmitHandler<UserSignUpBffRequest>;
  onError: SubmitErrorHandler<UserSignUpBffRequest>;
}


export function JoinMemberTemplate({ onSubmit, onError }: JoinMemberTemplateProps) {
  // validation check할 yupResolver 객체 만들기
  const schema = yup.object().shape({
    userId: yup.string().test({
      name: 'invalidId',
      async test(value = '', { createError }) {
        const { result, message } = validationJoinMemberId(value);
        return !result
          ? createError({
              message,
            })
          : true;
      },
    }),
    email: yup.string().email('이메일 에러'),
    agreeTermsService: yup.boolean().oneOf([true], '이용약관에러'),
  });

  const defaultSchema: UserSignUpBffRequest = {
    userId: '',
    password: '',
    userName: '',
    email: '',
    mobileNumber: '',
    agreeTermsService: false,
  };

  const methods = useForm({
    mode: 'onChange',
    resolver: yupResolver(schema),
    defaultValues: {
      ...defaultSchema,
    },
  });

  return (
    <FormProvider {...methods}>
      <form
        onSubmit={methods.handleSubmit(
          data => {
          /* 생략 */
            return onSubmit({
              ...data,
            });
          },
          error => {
          /* 생략 */
            return onError({ ...error });
          },
        )}
      >
          /* 생략 */
        <TextInput name="memberId" />
      </form>
    </FormProvider>
  );
}

export default JoinMemberTemplate;