main-프로젝트/ 회원가입 유효성 검사

회원가입 유효성 검사

아직 서버 연결이 되지 않아서 기다리는 겸 유효성 검사 부분 코딩을 먼저 진행했다.

typescript로 진행하는 것은 처음이어서 검색을 하던 중, yup 이라는 좋은 라이브러리를 발견했다

yup으로 유효성 검사 코딩하기

1. 필요한 모듈 install 하기

• react-hook-form
• yup
• @hookform/resolvers

다음 명령어를 통해 한 번에 install 한다
npm install react-hook-form yup @hookform/resolvers

<package.json에 install 된 모습>

2. 회원가입에 필요한 항목 파악

이번 프로젝트 회원가입 페이지에서 필요한 항목은 다음과 같다

3. type을 통한 정의 및 yup의 form validation 규칙대로 작성하기

먼저 type을 통해 정의해주었다

import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as Yup from 'yup';
....

type signUpSubmitForm = {
  displayName: string;
  email: string;
  password: string;
  confirmPassword: string;
};

const SignupForm: React.FC = () => {
...
}

각 항목에 맞게 에러메세지와 유효성 조건을 설정해준다

import ...

type ...

const SignupForm: React.FC = () => {
  const validationSchema = Yup.object().shape({
    displayName: Yup.string().required('사용하실 닉네임을 입력해 주세요'), //빈 칸 시 에러메세지
    email: Yup.string()
      .required('이메일을 입력해주세요') //빈 칸 시 에러메세지
      .email('유효하지 않은 이메일 주소입니다'), // 유효하지 않은 이메일일 경우 에러메세지
    password: Yup.string()
      .required('비밀번호를 입력해주세요')  //빈 칸 시 에러메세지
      .min(6, '최소 6글자 이상의 비밀번호를 입력해주세요'),  //글자 수 제한 에러메세지. max도 추가 가능
    confirmPassword: Yup.string()
      .required('비밀번호를 동일하게 한번 더 입력해주세요') //빈 칸 시 에러메세지
      .oneOf([Yup.ref('password'), null], '비밀번호가 일치하지 않습니다'), // 비밀번호 일치하지 않을 경우 에러메세지
  });

4. useForm()

validationSchema를 yupResolver()함수를 이용하여 useForm()에서 사용할 수 있도록 한다

나는 작성(register), 제출(handleSubmit), 에러(formState:{errors})를 사용했다

작성한 내용을 초기화 시키는 reset도 있다

const SignupForm: React.FC = () => {
  const validationSchema = ...

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<signUpSubmitForm>({
    resolver: yupResolver(validationSchema),
  });
  ...
}

5. onSubmit()

현재 아직 서버와 연결되지 않았기 때문에 console.log(data) 로 임시처리 해주었다.

const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<signUpSubmitForm>({
    resolver: yupResolver(validationSchema),
  });

  const onSubmit = (data: signUpSubmitForm) => {
    console.log(data);
  };

6. return 문 작성하기

이제 return문에서 React Hook Form을 작성하면 된다. register 함수는 {...register('fieldname')}으로 불러왔다.

return (
    <Card>
      <S.Form onSubmit={handleSubmit(onSubmit)}>
        <S.Title>회원가입</S.Title>
        <S.Label htmlFor="displayName">닉네임</S.Label>
        <S.Input
          type="displayName"
          id="displayName"
          {...register('displayName')}
        />
        {errors.displayName && <div>{errors.displayName?.message}</div>}
        <S.Label htmlFor="email">이메일</S.Label>
        <S.Input type="email" id="email" {...register('email')}></S.Input>
        {/* <Button>중복확인</Button> */}
        {errors.email && <div>{errors.email?.message}</div>}
        <S.Label htmlFor="password">비밀번호</S.Label>
        <S.Input
          type="password"
          id="password"
          {...register('password')}
        ></S.Input>
        {errors.password && <div>{errors.password?.message}</div>}
        <S.Label htmlFor="password">비밀번호 확인</S.Label>
        <S.Input
          type="password"
          id="confirmPassword"
          {...register('confirmPassword')}
        ></S.Input>
        {errors.confirmPassword && <div>{errors.confirmPassword?.message}</div>}
        <Button type="submit">회원가입 하기</Button>
      </S.Form>
    </Card>
  )

7. 결과화면

빈 칸일 경우

유효성 검사가 통과되지 않을 경우