Object.entries()로 폼 데이터 검증 리팩토링

문제 상황

회원가입 폼 검증 로직이 if문 덩어리로 되어 있어 유지보수가 어려웠다. 새로운 필드가 추가될 때마다 조건문이 늘어나고, 에러 메시지 관리도 복잡해졌다.

function validateForm(data) {
  const errors = {};
  if (!data.email) errors.email = '이메일을 입력하세요';
  if (!data.password) errors.password = '비밀번호를 입력하세요';
  if (!data.name) errors.name = '이름을 입력하세요';
  // 20개 필드 반복...
  return errors;
}

해결 방법

ES6의 Object.entries()와 reduce를 활용해 선언적으로 리팩토링했다.

const validationRules = {
  email: { required: true, pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/ },
  password: { required: true, minLength: 8 },
  name: { required: true }
};

function validateForm(data) {
  return Object.entries(validationRules).reduce((errors, [field, rules]) => {
    const value = data[field];
    
    if (rules.required && !value) {
      errors[field] = `${field}을(를) 입력하세요`;
    } else if (rules.pattern && !rules.pattern.test(value)) {
      errors[field] = '형식이 올바르지 않습니다';
    } else if (rules.minLength && value.length < rules.minLength) {
      errors[field] = `최소 ${rules.minLength}자 이상 입력하세요`;
    }
    
    return errors;
  }, {});
}

결과

• 검증 규칙과 로직이 분리되어 가독성 향상
• 새 필드 추가 시 validationRules만 수정하면 됨
• 테스트 코드 작성도 수월해짐

Object.entries()는 IE에서 지원하지 않지만, Babel로 트랜스파일하면 문제없다. 프로젝트에 polyfill 설정이 되어 있다면 적극 활용할 만하다.