#1. useInput hook

useInput

---

기본적으로 input을 업데이트 하는 Hook

const useInput = () => {};

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

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

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

export default App;

• useInput은 초깃값을 받아 state의 value값으로 설정하고 value 와 onChange 함수를 함께 객체로 리턴한다.
  • {value, onChange} === {value:value, onChange:onChange}
• 다른 function에서 event를 처리할 수 있다는 점에서 react에게 있어 혁명적이다.
  • react component가 아닌 useInput 함수에서 event를 처리한다.
• {...name} === value={name.value} onChange={name.onChange} 
  • 스프레드 연산자를 이용하면 긴 코드를 간결하게 표현할 수 있다.

useInput 유효성 검사

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

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("youngseo", maxLen);
  return (
    <div className="App">
      <h1>Hello</h1>
      <input placeholder="Name" {...name} />
    </div>
  );
};

export default App;

•     const { target: { value },} = event;
  • event.target.value의 값을 value 라는 변수에 할당하는 것과 같다.

 

• 입력값이 10이하일 때는 값을 입력하면 onChange 함수가 실행되고, (이 때 onChange=name.onChange) event.target.value값이 validate 함수 (여기서는 maxLen) 의 파라미터로 들어가 유효성 검사를 한다. 
• 이 때 유효성 검사의 boolean 값에 따라 setValue가 실행되어 value 값이 변경되고 상태가 바뀌어 다시 리렌더 되면서 새로운 value 값이 input 태그의 value 값으로 설정된다.

 

• 입력값이 10보다 커지면 willUpdate의 값이 false가 되어 setValue가 실행되지 않는다.