기존 코드

components/LoginForm.js

const [id, setId] = useState("");
const onChangeId = useCallback((e) => {
  setId(e.target.value);
}, []);
  

커스텀 훅 적용 코드

hook/useInput.js

import { useState, useCallback } from "react";

//커스텀 훅
export default (initValue = null) => {
  const [value, setValue] = useState(initValue);
  const handler = useCallback((e) => {
    setValue(e.target.value);
  }, []);
  return [value, handler];
};

components/LoginForm.js

const [id, onChangeId] = useInput("");

value가 id가 되는 것이고 handler가 onChangeId가 된다