[react Hooks] use Input

useInput 함수를 통하여 제어하는 예제.

https://youtu.be/s6KmBH1Ew4Q

 

글자수 제한.

const useInput = (initialValue, validator) => {
  const [value, setValue] = useState(initialValue);
  const onChange = event => {
    const {target:{value}} = event;  //const value = event.target.value 와 같음
    let willUpdate = true;
    if(typeof validator === "function"){
      willUpdate = validator(value)
    }
    if(willUpdate){
      setValue(value)
    }
  };
  return { value, onChange };
};

기본값인 initialValue 와 함수 자체를 받는 validator 을 인자로 가지고 있다.

useState 를 이용하여 기본값을 initialValue 로 설정해 놓는다.

 

인풋에 onChange 이벤트가 발생할경우,

이벤트가 일어난 곳을 찾아서 value 상수에 event.target.value 를 담는다.

willUpdate는 기본값으로 true를 갖는다.

만약 validator 의 타입이 function 이라면

willUpdate의 값에 validator의 value 를 대입한다.

그리고

willUpdate가 true라면, 인풋의 상태(state)에 아까 담은 value를 넣는다.

마지막으로 useState의 value, onChange 함수를 리턴한다. 

 

const App = () => {
  const maxLen = (value) => value.length <= 10
  const name = useInput("Mr.", maxLen);
  return (
    <div className="App">
      <h1>Hello</h1>
      <input placeholder="Name" value={name.value} onChange={name.onChange} />
    </div>
  );
};

maxLen 함수는 인자를 하나 받고 그 인자의 길이가 10 이하일때 true를 반환한다.

name 은 useInput에 문자열과 maxLen 함수를 집어넣고 실행한다.

 

input의 기본 값은 name의 value 즉 위에서 입력한 "mr." 이며,

onChange 이벤트가 발생할때마다 maxLen 함수가 실행되어

그때마다 조건을 검사하여 true혹은 false를 반환하여 useInput의 validator(value) 에 넣는다.