[React] Validate 함수 만들기

개발 도중 Formdata 를 통해서 굉장히 많은양의 데이터를 핸들링해서 백엔드로 보내야하는 케이스가 생겼었는데,
전송하기전 버튼혹은 함수안에서 어디든간에 한곳에서는 엄청나게 많은 키벨류를 Validate 해야만 했다.

 

물론 하나하나 조건문을 써가며 작성할 수 있었지만 굉장히 더러워지는 코드와 망해버리는 가독성을 보고는 함수 하나 만들어보지 뭐 하고 만들기 시작한 함수!

 

import { some } from "lodash";

type DisabledConditionTypes = {
  condition: Function;
  keys: string[];
};

const useValidate = (
  target: {
    [key: string]: string | number | null | undefined | boolean | File | Object;
  },
  disabled: DisabledConditionTypes[]
) => {

  // 모든 조건들을 순회하면서 조건의 true,false 여부를 담을 배열
  const validationChecks: boolean[] = [];
  // 조건을 만족하지 못한 key를 담을 배열
  const needValidation: string[] = [];
  
  
  disabled.map((item) => {
    item.keys.map((key) => {
      // 체크할 조건은 함수로 받아서 함수 안에서 다시 조건을 체크하게 만들기
      const check = item.condition(target[key]);

      // 위에서 준비한 2가지 타입의 배열에 목적에 맞는 값 추가
      validationChecks.push(check);

      if (item.condition(target[key])) {
        needValidation.push(key);
      }
    });
  });

  // 통과여부를 some 으로 체크
  const isValied = some(validationChecks, (item) => item === true);

  // 객체로 값 반환
  return {
    isValied,
    needValidation,
  };
};

export default useValidate;

 

Validate는 사용처마다 다르기 때문에 Validate할 조건을 어떻게 동적으로 담을것인가를 고민하다가 찾은 방법, 바로 함수로 만들어서 리턴하게하는법 !

 

target은 실제 체크할 객체를 넣어주고, disabled로 target의 오브젝트를 validation 한다

 

위 함수를 사용처에선 이렇게 사용하면 된다.

 

  type MyStateType = {
    name: string;
    text: string;
    subText: string;
    image: File | null;
    sound: File | null;
    video: File | null;
  };

  const [myState, setMyState] = useState<MyStateType>();
  
  const myDisables = [
    {
      condition: (item: string) => item === "",
      keys: [
        "name",
        "text",
        "subText",
      ],
    },
    {
      condition: (item: File | null) => item === null,
      keys: [
        "image",
        "sound",
        "video",
      ],
    },
  ];

  console.log(useValidate(myState, myDisables))

 

최종적으로 통과여부는 isValid를 통해 확인하면되고, needValidation을 통해 통과하지못한 키들을 바로 확인할 수 있다 !

 

근데 다 만들고나니 친구에게 yup 이라는 라이브러리를 소개 받았는데, 아주 훌륭하다,,

 

예시는 저렇게 6가지로했지만 나는 실제 프로젝트에서 20가지 넘는 키들을 체크해야했으나, 딱 한곳 외에선 이정도로 체크할곳은 또 없어서 정말 여러곳에서 체크한다면 yup이 좋겠지만, 나는 그냥 직접 만든 함수 사용하고 라이브러리는 설치하지 않기로 했다.