회원가입 동기적 유효성 검사, 정규표현식, Object.entries, every

라용·2022년 9월 27일
1

위코드 - 스터디로그

목록 보기
61/100

위코드 1차 팀프로젝트를 진행하며 정리한 내용입니다.

멘토 리뷰를 받고 정리해본 유효성 검사 방식을 정리했습니다. 기존에는 유효성 검사를 하나씩 실행해서 최종 불린값을 하나의 변수로 담았습니다. 이렇게 작성할 경우 항목이 나뉘어서 더 직관적일 수 있고, 조건부 렌더링의 조건도 더 명확해 보입니다. 하지만 검사항목이 늘어날 경우 코드가 길어지기도 합니다.

// 이메일 유효성 검사

const isEmail = email => {
    const emailRegex = /^[a-z0-9_+.-]+@([a-z0-9-]+\.)+[a-z0-9]{2,4}$/;
    return emailRegex.test(email);
};

const isEmailValid = isEmail(email); 

// 비밀번호 유효성 검사

const isPw = pw => {
    const pwRegex = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/;
    return pwRegex.test(pw);
};

const isPwValid = isPw(pw)

// 전체 유효성 검사

isAllvailid = isEmailValid && isPwValid

// 각 유효성 검사값으로 조건부 렌더링 안내문구 삽입

{!isEmailValid && ( 
  <p
    className="inputCheck"
    style={{ display: email.length > 0 ? 'block' : 'none' }} // 삼항 연산자
  >
    * 이메일 양식을 맞춰주세요!
  </p>
)}

실제 회원가입 페이지에는 이메일, 비밀번호 이외에도 확인해야 하는 항목이 많으므로 아래처럼 각 항목별 유효성 검사 함수를 객체로 담아서 사용할 수 있습니다. 객체의 key 값은 userInput 으로 받아온 정보의 key 값(value 로 유저가 입력한 값을 받을)이고 value 에는 해당 입력값의 유효성을 검사할 함수식을 넣습니다.(불린값을 리턴하는) 이후 userInput 값을 for in 문으로 순회하며 유저가 입력한 값을 해당 유효성 검사 함수에 넣어주며 불린값을 반환합니다.

// 유효성 검사 함수를 뫃은 객체 생성

const validator = {
    email: email => /^[a-z0-9_+.-]+@([a-z0-9-]+\.)+[a-z0-9]{2,4}$/.test(email),
    password: password =>
      /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/.test(
        password
      ),
    pwCheck: password => password === pwCheck,
    name: name => Boolean(name),
    gender: gender => Boolean(gender),
    phone_number: phone_number =>
      /01[016789]-[^0][0-9]{2,3}-[0-9]{4,4}/.test(phone_number),
    year: year => Boolean(year),
    month: month => Boolean(month),
    day: day => Boolean(day),
    time: time => Boolean(time),
};

// 모든 유효성 검사를 진행하는 함수 선언, for in 문 활용

const validateAll = () => {
    for (const key in userInput) {
      const validateFunc = validator[key];
      const value = userInput[key];
    
      const isValid = validateFunc(value);
      if (!isValid) {
        return false;
      }
    }
    return true;
};

위의 validateAll 함수는 아래와 같이 수정할 수 있습니다. Object.entries() 로 입력값 객체를 배열에 한 쌍으로 담아주고,(콘솔을 찍으면 아래와 같은 모습)

every 메서드로 배열 안의 모든 요소가 판별 함수를 통화하지는 테스트한 후 불린값을 반환합니다.

const validateAll = () =>
    Object.entries(userInput).every(([key, value]) => {
      return validator[key](value);
});
profile
Today I Learned

0개의 댓글