[CustomHook]useInput

useInput

variable shadowing 참고
전개연산자 참고
value = {name.value} onChange = {name.onChange}
{...value}
위 두 코드가 동일하게 작동되는 원리에 대해 설명.

1. input에 입력된 값을 value에 할당하기.

import { React, useState } from "react";
import { ReactDom } from "react-dom";
import "./styles.css";

const useInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);
  const onChange = (event) => {
    const {
      target: {value} //{value: event.target.value}
    } = event
    setValue(value)
    //setValue(event.target.value)로 써도 동작하는데
    //왜 객체를 만들어서 target에 value를 할당하는걸까?
    //아마 value를 블록 내에서 선언해주어서 
    // value만으로도 입력값을 불러올 수 있게 한 것 같다.
  };

  return { value, onChange };
};

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

2. 유효성 검사

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 };
};

export default function App() {
  const maxLen = value => !value.includes("@")
  const name = useInput("Mr. ", maxLen);
  return (
    <div className="App">
      <h1>Hello</h1>
      <input placeholder="Name" {...name} />
    </div>
  );
}