[Custom Hooks] useInput(유효성검사 추가) - 추가중

useInput

• 예전에 노마드코더 강의 보고 만든 커스텀 훅에 유효성검사 함수들을 추가 적용할 수 있게 기능 개선
• 두번째 파라미터는 배열이고 필수는 아니나 배열에 함수가 아닌 다른 값을 넣으면 에러를 발생
  • 사용자에게 뭘 잘못한건지 알려주기위해 잘못된 점을 로그로 출력함

/**
 * 입력하는 값 반영하고 유효성검사를 추가 할수 있는 커스텀 훅
 * @param {string} initialValue - input의 초기값.
 * @param {string} validators - useInput에 적용될 유효성검사 함수를 담은 배열
 */
export const useInput = (initialValue, validators) => {
  const [value, setValue] = useState(initialValue);
  let onChange = null;
  if(validators) { // 밸리데이션 필요한 경우
    try {
      if(!Array.isArray(validators) || typeof validators[0] !== "function"){
        throw new Error("second parameter must be array includes function");
      } 
    } catch (error) {
      console.error(error)
    }

    let willUpdate = [];
    validators.forEach((v, i)=> willUpdate[i]=true);

    onChange = e => {
      const {target: {value}} = e;

      validators.forEach((valid, i)=> willUpdate[i] = valid(value));

      if(willUpdate.every((v) => v === true)) setValue(value); 
    };
  } else {
    onChange = e => {
      const {target: {value}} = e;
      setValue(value);
    }
  }
  return { value, onChange };
}

function App() {
  const validMaxLen = (value) => value.length <= 10;
  const validNoInputString = (value) => !value.includes("#");
  const name = useInput("하이", [validMaxLen, validNoInputString]);
  return (
    <>
      <h1>안녕 커스텀 훅</h1>
      <input type="text" {...name}/>
    </>
  );
}

쓸모 있는 기능 훅들 만들어서 추가할 예정...