useInput

useInput은 기본적으로 Input을 업데이트 한다.

const useInput = (initial)=>{
  const [value, setValue] = useState(initial)
  const onChange = (event) =>{
    console.log(event.target)
  }
  return {value, onChange}
}

const App = () => {
  const name = useInput("Mr.")
  return (
    <div>
      <input placeholder="Name" value={name.value} onChange={name.onChange}/>
      {/*  <input placeholder="Name" {...name}/> 으로도 작성할 수 있음 */}
    </div>
  );
};

이렇게 만들어 이벤트를 분리된 파일, 다른 entity에 연결해서 처리할 수 있다.

알고는 있었지만, 다시 한번 정리해서 좋다.

useInput을 좀더 개선해보자.

useInput + 유효성 검증

const useInput = (initial, validator) => {
  const [value, setValue] = useState(initial);
  const onChange = (event) => {
    const {
      target: { value },
    } = event;
  };
  let willValue = true;
  if (typeof validator === "function") willValue = validator(value);
  if (willValue) setValue(value);

  return { value, onChange };
};

const App = () => {
  const maxLen = (value) => value.length <= 10;
  const name = useInput("Mr.", maxLen);

  return (
    <div>
      <input placeholder="Name" {...name} />
      {/*  <input placeholder="Name" value={name.value} onChange={name.onChange}/> 으로도 작성할 수 있음 */}
    </div>
  );
};

이는 hooks와는 관계 없지만, 더 예쁘게(검증기능을 가진) function을 만들 수 있다.

길이가 10보다 작으면 update하는 간단한 로직이지만, 함수를 인자로 넘겨주어 재사용성을 높였다는 점에 집중하자.