useInput은 input 엘리먼트에 입력되는 값을 업데이트 한다.

커스텀 훅 useInput

import React, { useState } from "react";

const useInput = (initialValue) => {
  // 특정문자를 쓸 수 없도록 하는 validator 함수
  const [value, setValue] = useState(initialValue);
  const onChange = (e) => {
    const {
      target: { value }
    } = e;
    setValue(value);
  };
  // 어떤 변화를 주기 전에 기본값 Mr.를 value와 함께 return
  return { value, onChange };
};

useInput함수는 초기값을 인자로 받고 {value, onChange}를 리턴한다.

export const App = () => {
  const name = useInput("Mr.");

  return (
    <div className="App">
      <h1>Click Buttons!</h1>
      {/* <input placeholder="Name" value={name.value} onChange={name.onChange} /> */}
      <input placeholder="Name" {...name} />
// name은 객체니까 spread operator로 표현할 수 있다. 
    </div>
  );
};

ref)

let val = 'hi';

let onChange = (e) => console.log(e,'e');

let obj = {val, onChange};

obj;
  {val: "hi", onChange: (e) => console.log(e,'e')}

let result = {...obj};

result;
  {val: "hi", onChange: (e) => console.log(e,'e')}

유효성 검증 기능 추가

const useInput = (initialValue, validator) => {
  // 특정문자를 쓸 수 없도록 하는 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);
    }
  };

  // 어떤 변화를 주기 전에 기본값 Mr.를 value와 함께 return
  return { value, onChange };
};

export const App = () => {
  // const maxLen = (value) => value.length <= 10;
  const maxLen = (value) => !value.includes("@");
  const name = useInput("Mr.", maxLen);

  return (
    <div className="App">
      <h1>Click Buttons!</h1>
      {/* <input placeholder="Name" value={>name.value} onChange={name.onChange} /> */}
      <input placeholder="Name" {...name} />
    </div>
  );
};