[Team Project] Bid Panda ep.2

✶ 항해99 16기 3조
팀 프로젝트 Bid Panda의 FE 개발일지

Issue ▸
회원가입 기능에 중복 체크 기능이 2개, 이메일 인증 코드 발송 후 검증하는 요소가 있는 상태였다. 회원가입에 필요한 개인정보는 4개, 그리고 form data로 묶여서 서버와 통신하고 있었고, input들도 form 태그의 아래에서 영향을 받고 있었다. 하지만 React Hook Form의 getValues라는 파라미터를 사용해 해결할 수 있었다.

Solve :

// 중복 확인과 이메일 인증번호 발송하는 이벤트 핸들러에서, RHF의 Form으로 부터 관리하고 있는 ...register 값을 getValues로 받아와 변수에 저장하고 사용하고 있다. 
 const checkMembernameHandler = async () => {
    const valMembername = getValues("membername");
    await CheckMembernameApi(valMembername);
    setIsMembernameCheck(true);
  };
  const checkNicknameHandler = async () => {
    const valNickname = getValues("nickname");
    await CheckNicknameApi(valNickname);
    setIsNicknameCheck(true);
  };
  const onValidEmailHandler = async () => {
    const valEmail = getValues("email");
    await SendValidateEmailApi(valEmail);
    setIsValidEmailSent(true);
  };

 // 이렇게 useForm 선언 시에 추가해줘야 한다.
const {
    register,
    handleSubmit,
    getValues,
    formState: { errors },
  } = useForm({ mode: "onBlur" });