사용법

1. validator 함수 작성
2. 기존 useInput 파라미터에 추가
3. validator가 함수일때, validator 함수에 부합하는지 체크한다.
4. 부합한다면 setValue를 적용한다.

예제

import React, { useState } from "react";
import "./styles.css";

const useInput = (initialValue, validator) => {
  const [value, setValue] = useState(initialValue);
  const onChange = (event) => {
    const {
      target: { value }
    } = event;

    let willUpdate = true;
    if (typeof validator === "function") {
      willUpdate = validator(value);
    }
    if (willUpdate) {
      setValue(value);
    }
  };
  return { value, onChange };
};

const App = () => {
  const maxLengthValidator = (value) => {
    return value.length <= 10;
  };
  const name = useInput("Mr.", maxLengthValidator);
  return (
    <div className="App">
      <h1>React Hooks!</h1>
      <input placeholder="Name" {...name} />
    </div>
  );
};

export default App;

노마드 코더 - 실전형 리액트 Hooks 10개 # 1.2 useInput two
https://nomadcoders.co/react-hooks-introduction/lectures/1591