[React] 회원가입 상태관리 및 유효성 검사(정규식)

회원가입 페이지를 구현하는데 있어 이메일 형식 검사나 비밀번호 일치확인 검사가 필요하였고 

이를 위해 커스텀 훅을 사용하였다.

 

 

다음은 useInput 커스텀 훅으로 input 태그의 입력 값을 관리하는 코드이다.

import { useState, useCallback } from "react";
import { signUpInputType } from "../../../types/userDto";

export const useInput = () => {

  const [signUpForm, setSignUpForm] = useState<signUpInputType>({
    email: '',
    id : '',  // 사용자 ID (이메일 형식)
    password : '', // 비밀번호
    gender : '', // 사용자 성별, 'M' : 남자, 'W' : 여자
    name : '', // 사용자 이름
    phoneNumber : '', // 폰 번호
    nickname : '', // 닉네임
    isSnsAccount : 'M', // SNS 연동 계정 여부
    passwordConfirm: '', // 비밀번호 확인
    authCode: '', // 인증코드
  });
  
  const onChangehandler = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    
    setSignUpForm(({ ...signUpForm, [name]: value }));
  }, [signUpForm]);

  return {signUpForm, onChangehandler};
};

 

 

다음은 useValid 커스텀 훅으로 input태그에서 필요한 유효성 검사를 진행하는 코드이다.

import { useState, useEffect } from "react";
import { warningTextType, isvalidType } from "../../../types/props/SignUp/signUpProps";
import { signUpInputType } from "../../../types/userDto";

export default function useValid(changeValue: signUpInputType) {
  const [validText, setValidText] = useState<warningTextType>({
    emailText : '',
    passwordText : '',
    passwordCheckText : '',
  });
  const [isValid, setIsValid] = useState<isvalidType>({
    isEmail : false,
    isPassword : false,
    isPasswordConfirm : false,
  });

  //이메일 검사
  useEffect(() => {
    const emailRegex = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/;
    if(!emailRegex.test(changeValue.email)) {
      setValidText({...validText, emailText:'이메일 형식을 확인해주세요'});
      setIsValid({...isValid, isEmail:false});
    }else {
      setValidText({...validText, emailText:''});
      setIsValid({...isValid, isEmail:true});
    }
  }, [changeValue.email]);

  //비밀번호 검사
  useEffect(() => {
    const passwordRegex = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,16}$/;
    if(!passwordRegex.test(changeValue.password)) {
      setValidText({...validText, passwordText:'숫자+영문자+특수문자 조합으로 8자리 이상 입력해주세요'});
      setIsValid({...isValid, isPassword:false});
    }else {
      setValidText({...validText, passwordText:''});
      setIsValid({...isValid, isPassword:true});
    }
  }, [changeValue.password]);

  //비밀번호 일치 검사
  useEffect(() => {
    if(changeValue.password !== changeValue.passwordConfirm) {
      setValidText({...validText, passwordCheckText:'비밀번호가 일치 하지 않습니다.'});
      setIsValid({...isValid, isPasswordConfirm:false});
    }else {
      setValidText({...validText, passwordCheckText:''});
      setIsValid({...isValid, isPasswordConfirm:true});
    }
  }, [changeValue.passwordConfirm]);

  return { validText, isValid };
}

emailRegex는 이메일 형식을 확인하는 정규식이다.

passwordRegex는 비밀번호 정규식으로  숫자,영문자,특수문자 조합으로 8자리이상 16자리 이하로 나타내는 정규식이다.

 

useInput에 있는 상태를 인자로 받아와 정규식과 비교 검사하여

validText에 보여질 텍스트와 isValid를 수정한다.

 

 

 

 

 다음과 같이 코드를 작성하면  비밀번호가 일치하지 않을때 해당하는 텍스트를 보여줄수 있다. 

{!isValid.isPasswordConfirm && <ValidDiv>{validText.passwordCheckText}</ValidDiv>}

 

또한

 

다음과 같이 코드를 작성하면  styled-components를 이용하여 이메일 형식이 맞지 않을때 테두리 색깔을 빨간색으로 보여줄 수 있다..  props로 테두리 색깔을 전달한다.

 border={isValid.isEmail === false && signUpForm.email !== '' ? "red" : "#b4b4b4"}​

import styled from "styled-components";

export const ElementInput = styled.input<{ border : string}>`
  font-size: 10px;
  width: 290px;
  height: 35px;
  padding : 0px 10px 0px 10px;
  border: 1px solid;
  border-color: ${props => props.border};
  outline: none;
  overflow: hidden;
`;

 

 

다음은 이를 활용한 컴포넌트의 코드이다.

 const { signUpForm, onChangehandler } = useInput(); 
 const { validText, isValid } = useValid(signUpForm);
 
 ...
 
<ElementDiv>
  <ElementP>비밀번호</ElementP>
  <ElementInput
    type="password"
    value={signUpForm.password}
    name="password"
    onChange={onChangehandler}
  ></ElementInput>
</ElementDiv>
<ElementDiv>
  <ElementP>비밀번호 확인</ElementP>
  <ElementInput
    type="password"
    value={signUpForm.passwordConfirm}
    name="passwordConfirm"
    onChange={onChangehandler}
  ></ElementInput>
</ElementDiv>
{!isValid.isPasswordConfirm && <ValidDiv valid="false">{validText.passwordCheckText}</ValidDiv>}
<ElementDiv>
  <ElementP>이메일</ElementP>
  <EmailInput
    value={signUpForm.email} 
    name="email"
    type="email"
    placeholder="이메일 형식으로 작성해주세요"
    onChange={onChangehandler}
    border={isValid.isEmail === false && signUpForm.email !== '' ? "red" : "#b4b4b4"}
  ></EmailInput>
</ElementDiv>

...