react-hook-form with typescript 회원가입

react-hook-form 추가 내용

react-hook-form 사용하면서 발생한 문제

1. 이메일 인증을 하기위해서 react-hook-form input에 저장된 값을 가져와서 이메일을 담아 post해야하는데 어떻게 그 저장된 값을 보지??

2. 비밀번호 확인을 위해서 이전에 썼던 값을 확인해야하는데 어떻게 확인하지??

문제 설명

1. 이메일 인증 post 보내기

이메일 인증을 하기 위해서는 input창에 입력된 데이터를 가져와서 api post하기 위해서 필요하다. 하지만 어떻게 email을 알 수 있지???에 대한 고민이 생겼다.

axios.post('https://localhost/email/', email)을 하게 될텐데 이 이메일을 가져오는 방법을 못 찾았다.

const handleSignUp: SubmitHandler<IForm> = (data) => {
   console.log(data)
  };

이렇게 하면 데이터 값이 나온다 왜냐하면 handleSubmit을 눌렀기 때문에 데이터가 저장되어 나온다.

그래서 submit이 아닌 다른 행위에 대해서도 데이터가 저장되어 출력되는 걸까? 라는 생각에

const handleSendEmail = (data:any) => {
   console.log(data)

};

위 처럼 handleSendEmail에도 data를 집어넣고 했다. 하지만 당연히도 에러가 발생했다. 그렇다면 input데이터는 어떻게 찾아올 수 있을까??

2. 앞에 있던 비밀번호와 현재 입력 비밀번호가 일치하는지 확인하기(비밀번호확인)

비밀번호 확인을 위해서는 앞에서 입력한 비밀번화 현재 비밀번호 입력에서 입력한 값이 일치하는 지 확인해야한다
그렇다면 이건 어떻게 확인할 수 있을까??

앞선 email 인증 문제와 비슷한 맥락이다. 하지만 해결방법은 다르다!!

문제해결

1.email 인증보내기

생각보다 단순하다. react-hook-form을 사용하면서 간과했던 함수를 쓰면된다. 바로 watch or getValues다. watch는 실시간으로 input창의 상태를 확인할 수 있다.

이 watch와 getValues를 사용해서 input창의 데이터 값을 가져와서 활용해보자

1. useForm에 watch,getValues 함수를 불러와준다.

const {
    register,
    formState: { errors, isSubmitting, isSubmitted },
    handleSubmit,
    control,
    getValues,
    watch
  } = useForm<IForm>({
    mode: 'onSubmit',
    defaultValues: {
      email: '',
      password: '',
    },
  });

2-1. watch를 이용해 email값을 불러와서 저장해준다.
const watchedEmail = watch('email');

2-2. getValues를 이용해
const getEmail = getValues('email') 이라는 방식으로 watch대신 사용할 수 있다.

3. 그렇게 하면 watchedEmail,getEmail이 email input창에 입력된 값이다.

---

getValues라는 useForm의 함수를 활용한다.
const getEmail = getValues('email') 이라는 방식으로 watch대신 사용할 수 있다.

2. 비밀번호 확인 작업

이것은 더 단순하다. react-hook-form의 validate 작성으로 끝낼 수 있다.

아래가 비밀번호입력창이라고 할때 name="password"라는 것을 기억하자

<StyledBasicInput
                type="password"
                name="password"
                placeholder="비밀번호를 입력하세요"
                control={control}
                rules={{
                  minLength: {
                    value: 8,
                    message: '8자리 이상 비밀번호를 사용하세요.',
                  },
                  required: '비밀번호는 필수 입력입니다.',
                }}
                aria-invalid={
                  isSubmitted ? (errors.password ? 'true' : 'false') : undefined
                }
              />

여기서 name의 "password"가 중요하다. 이것으로 각각 어떤 데이터를 가져오는지 알 수 있다.

이렇게 비밀번호 확인 input창에 register를 등록한다. 그후 validate를 사용한다.

<InputContainer>
              <StyledInput
                id="passwordconfirm"
                type="password"
                {...register('passwordconfirm', {
                  required: true,
                  validate: {
                    check: (val) => {
                      const originalPassword = getValues('password');
                      if (originalPassword && originalPassword !== val) {
                        return '비밀번호가 일치하지 않습니다.';
                      } else {
                        const checkPasswords = () => {
                          setCheckPassword(1);
                        };
                      }
                    },
                  },
                })}
                placeholder="비밀번호를 재입력하세요"
              />
            </InputContainer>

validate => 유효성 검증
check: 확인작업
val => 현재 passwordconfirm에 등록된 input값
const originalPassword = getValues('password') <= 여기서 어떤 input값이랑 비교하고 싶은지 결정하게 된다 getValues('password')하면 password라는 name으로 등록된 input의 값을 가져온다.

const {
    getValues,
  } = useForm<IForm>({
    ...
  });

getValues는 useForm에서 가져와야한다!!