[React] React Hooks (2) - useInput

useInput

useInput은 기본적으로 input을 업데이트함

 

useInput 사용 예시

import React, { useState } from "react";
import ReactDOM from "react-dom";

const useInput = initialValue => {
  const [value, setValue] = useState(initialValue);
  const onChange = event => {
    const {
      target: { value }
    } = event;
    setValue(value);
  };
  return { value, onChange };
};
  
const App = () => {
  const name = useInput("Mr.");
  return (
    <div className="App">
      <h1>Hello</h1>
      <input placeholder="Name" value={name.value} onChange={name.onChange} />
      <input placeholder="Name" {...name} />
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

여기서 <input placeholder="Name" value={name.value} onChange={name.onChange} /> 이 코드와

<input placeholder="Name" {...name} /> 이 코드는 똑같이 동작함

 

---

useInput에 유효성 검증 추가하기

유효성 검증 기능을 추가해보기

 

useInput 유효성 검증 예시

import React, { useState } from "react";
import ReactDOM from "react-dom";

const useInput = (initialValue, validator) => {
  const [value, setValue] = useState(initialValue);
  const onChange = event => {
    const {
      target: { value }
    } = event;
    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("Mr.", maxLen);
  return (
    <div className="App">
      <h1>Hello</h1>
      <input placeholder="Name" {...name} />
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM render(<App />, rootElement);

최대 10글자를 넘어가면 더이상 작성 X