[멋쟁이 사자처럼 12기 - Mango Diary] react-hook-form trigger 를 사용해보다

<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
  <div className="input">
    <InputForm name="userName" IconSrc={Images.person} placeholder="닉네임을 입력해주세요." />
    <InputForm
      name="userEmail"
      IconSrc={Images.email}
      placeholder="이메일을 입력해주세요."
      purpose={{
        isUsed: true,
        label: '인증번호 발송',
        onClick: () => {
          handleSendVerification();
        },
      }}
    />
    {showVerificationInput && (
      <InputForm
        name="verificationCode"
        IconSrc={Images.verify}
        placeholder="인증번호를 입력해주세요."
        purpose={{
          isUsed: true,
          label: '확인',
          onClick: () => console.log('확인 버튼 클릭'),
        }}
      />
    )}
    <InputForm name="password" IconSrc={Images.passward} placeholder="비밀번호를 입력해주세요." />
    <Button label="로그인 하러가기" variant="OutlineBlack" size="small" disabled={!isValid} onClick={() => navigate('/login')} />
  </div>
  <div className="bottom">
    <Button type="submit" label="다음" variant="BlackFull" size="medium" disabled={!isValid} />
  </div>
</FormProvider>

react-hook-form 을 사용할 때,

폼에서 전체를 관리하고 있으며 inputForm 컴포넌트 안에 버튼을 눌렀을 때, 해당 값에 대한 yup 에러를 잡고 싶다면?

그리고 그 잡은 에러를 Input Form 안에 에러메세지로 표기하고 싶다면,,,?

예를 들어 이런 상황에서, 

이메일을 작성 하지 않고 inputForm 컴포넌트 안에 있는  인증번호 발송 버튼을 누르면

전체 form 을 검사하는 것이 아니라 email 한 값에 대한 형식만 yup 으로 검사하고 싶은 것이다. 

그럴 땐 trigger 를 사용하면 된다!

trigger 메서드는 react-hook-form에서 특정 필드나 모든 필드의 유효성 검사를 수행할 수 있게 해 줍니다. 이메일 필드만을 검사하도록 설정하면, 인증번호 발송 버튼을 클릭할 때 해당 필드의 유효성만 검사할 수 있습니다.

 

<Button
  label={purpose.label}
  variant="BlackFull"
  size="xsmall"
  type="button"
  onClick={() => {
    trigger(name).then((isValid) => {
      if (isValid) purpose.onClick();
      else console.log('Invalid email');
    });
  }}
/>

 

 

사용할 때는 이렇게 내가 사용하고 싶은 onClick 함수 안에서 이런 형태로 사용하면 된다.