[강의노트] Hooks - useInput

useInput()

• 기본적으로 input을 업데이트함
• 사용예제
  • {...name}
    => value={name.value} onChange={name.onChange}

import React, { useState } from "react";

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

const App = () => {
  const name = useInput("Ms.");
  return (
    <div>
      <h1>Hello</h1>
      <input placeholder="Name" {...name} />
    </div>
  );
};

export default App;

• validator 함수 추가

import React, { useState } from "react";

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

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

export default App;