[Typescript] 입력의 유효성을 검사하는 유틸리티 - 라이브러리 없이 간단하게 구현하기

구현 동기

1. 필수값, 글자수 제한, 이메일 형식, 전화번호 형식 등 간단한 검사만 필요하다.
2. joi나 yup 같은 외부 라이브러리 없이 구현하고 싶다. (복잡한 기능은 필요 없다.)
3. 메서드 체이닝을 직접 구현해보고 싶다

이러한 동기로 입력의 유효성을 검사하는 유틸리티를 직접 구현해 보기로 했다.

요구사항

• 메서드 체이닝으로 체이닝 된 순서대로 유효성을 검증한다.
• 확장성을 위해 직접 정의한 메서드로 유효성을 검증할 수 있어야 한다.
• 입력 필드 컴포넌트에서 입력 시마다 유효성을 자동으로 검증한다.

---

구현하기

Validator 클래스

유효성을 검증하는 Validator 클래스를 생성한다.

클래스의 메서드로 유효성을 검증하는 로직을 구현한다.

각 메서드는 항상 this를 리턴해서 체이닝이 가능하도록 한다.

type ValidatorFunction = (input: string) => Promise<boolean> | boolean;
const emailPattern = /^([a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6})*$/;

export default class Validator {
  isValid: boolean = true;
  private chain: Array<ValidatorFunction> = [];

  required = () => {
    this.chain.push((input: string) => input.length > 0);
    return this;
  };

  max = (max: number) => {
    this.chain.push((input: string) => input.length < max);
    return this;
  };

  min = (min: number) => {
    this.chain.push((input: string) => input.length >= min);
    return this;
  };

  test = (pattern: RegExp) => {
    this.chain.push((input: string) => new RegExp(pattern).test(input));
    return this;
  };

  email = () => {
    return this.test(emailPattern);
  };

  exec = async (fn: ValidatorFunction) => {
    this.chain.push(fn);
    return this;
  };

  validate = async (input: string) => {
    for await (const validator of this.chain) {
      const isValid = await validator(input);
      this.isValid = isValid;
      if (!isValid) return false;
    }
    this.isValid = true;
    return true;
  };
}

chain

validate 메서드에서 chain 안의 ValidatorFunction을 처음 체이닝 된 것부터 차례대로 실행한다. (FIFO 큐처럼 동작한다.)

chain은 외부에서 접근하거나 변경할 수 없도록 private으로 지정한다.

validate()

모든 유효성 검사를 통과하면 true를 반환하고, 하나라도 통과하지 못하면 false를 반환한다.

이번 프로젝트에서는 따로 에러 메시지를 표시하지 않고 있다. 추후 에러메시지가 추가된다면 false 대신 throw Erorr('에러 메시지')로 구현할 수 있겠다.

exec(), test()

확장성을 위해 추가한 메서드이다. Validator 내 미리 정의된 유효성 검사 메소드 외에도 로직을 직접 구현하여 넘겨줄 수 있다.

exec(): 직접 구현한 함수로 검사할 수 있다.

test(): 직접 정의한 정규식으로 검사할 수 있다.

 

Validator 클래스 사용하기

다음처럼 input에 대한 유효성을 정의할 수 있다.

const emailValidator = new Validator().required().email()
const nicknameValidator = new Validator().required().min(2).max(10).test(/^[a-zA-Z0-9]*$/)

 

input 컴포넌트 내부에서는 validator가 prop으로 주어질 때,

ChangeEvent 핸들러에서 validate를 실행하고, 그 결과에 따라 유효성을 나타내는 ui를 변경한다.

<TextField
  label="닉네임"
  validator={nicknameValidator}
  ...
/>

---

마무리

다른 프로젝트에서는 유효성 검증에 react-hook-form과 yup 라이브러리를 사용했었다.

yup을 처음 사용했을 때 메서드 체이닝으로 input을 정의하는 것에 감명을 받았다.

복잡한 form을 사용한다면 yup이나 그와 비슷한 joi 같은 라이브러리를 사용하는 것이 더 좋을 것이다.

하지만 input이 많지 않고, 복잡한 검증이 필요하지 않다면 이렇게 간단한 Validator 클래스를 만들어 사용해 보자