[react] useInput

초기값 지정, 유효성 검사

 

useInput은 입력값과 유효성 검사 조건을 매개변수로 받고 value와 onChange를 반환한다.

value는 해당 input의 value가 된다.

사용자가 입력한 값을 willUpdate를 이용해 유효성 검사 후 결과를 담아주고

유효성 검사 조건에 맞으면 true를 반환 setValue를 이용해서 value로 받는다.

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

function App() {
  const useInput = (initialValue, validator) => {
    const [value, setValue] = useState(initialValue);
    const onChange = (e) => {
      const {
        target: { value }
      } = e;
      // const value = e.target.value; 와 같음
      let willUpdate = true;
      if (typeof validator == "function") {
        willUpdate = validator(value);
      }
      if (willUpdate) {
        setValue(value);
      }
    };
    return { value, onChange };
  };
  const maxLen = (value) => value.length <= 10;
  // 유효성 검사 조건
  const name = useInput("Mr.", maxLen);

  return (
    <div className="App">
      <h1>Hello!!</h1>
      <input placeholder="name" {...name}></input>
      {/* {...name} 는 value = {name.value} 와 같다 */}
    </div>
  );
}

export default App;