[React-Hooks] React Hooks - useInput

* useInput

• useInput은 기본적으로 input을 업데이트 한다.
• useInput은 initialValue(초기값)를 parameter로 받는다.

const useInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);
}

---

* useInput을 이용하여 값 지정 하기

const useInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);
  return { value };
}

const App = () => {
  const name = useInput("Hyeonwoo");
  return (
    <div>
      <h1>Hello</h1>
      <input placeholder="Write Your name" value={name.value} />
    </div>
  );
};

• useInput은 initialValue(초기값)을 지정할 수 있는 함수이다.
• useInput은 value를 return하고
• name은 value의 값을 가지고 있다.
• {name.value}를 이용해 value값을 가지고 온다.

(참조) Spread Operator을 이용해서 좀 더 짧은 코드로 값을 가져올 수 있다.

<input placeholder="Write Your name" {...name} />

---

* useInput을 이용하여 값 변경하기

const useInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);
  const handleInputValue = (event) => {
    const {
      target: {value}
    } = event;
    setValue(value)
  }
  return { value, handleInputValue };
}

const App = () => {
  const name = useInput("Hyeonwoo");
  return (
    <div>
      <h1>Hello</h1>
      <input placeholder="Write Your name" value={name.value} onChange={handleInputValue}/>
    </div>
  );
};

• handleInputValue함수를 이용하여서 input안에 변경되는 값을 event.target.value를 이용해 확인한뒤
• setValue를 이용해 value의 값을 변경해준다.

---

* 유효성 검사 기능  (validator)

const useInput = (initialValue, validator) => {
  const [value, setValue] = useState(initialValue);
  const handleInputValue = (event) => {
    const {
      target: {value}
    } = event;
    let willUpdate = true;
    if (typeof validator === 'function') {
      willUpdate = validator(value);
    }
    if (willUpdate) {
      setValue(value)
    }
  }
  return { value, handleInputValue };
}

• willUpdate라는 변수를 만들어주고 기본값을 true로 할당해준다.
• 만약 validator의 타입이 함수일때 value에 따른 willUpdate의 값을 할당해준다.
• 그리고 willUpdate가 true라면 setValue함수를 실행하는 로직을 구성한다.
• 만약 유효성이 false라면 값이 변경되지 않도록 한다.

const App = () => {
  const maxLen = (value) => value.length <= 10;
  const name = useInput("Hyeonwoo", maxLen);
  return (
    <div>
      <h1>Hello</h1>
      <input placeholder="Write Your name" value={name.value} onChange={handleInputValue}/>
    </div>
  );
};

• maxLen이라는 함수를 만들어 주고 value의 길이를 10까지 제한을 건다.
• value의 길이가 10을 초과하게 될 경우 false가 willUpdate에 할당되어서 값이 변경되지않는다.

---

* 특수문자 입력 제한 (limit)

const App = () => {
  const limitValue = (value) => !value.includes("@") && !value.includes("!");
  const name = useInput("Hyeonwoo", limitValue);
  return (
    <div>
      <h1>Hello</h1>
      <input placeholder="Write Your name" value={name.value} onChange={handleInputValue}/>
    </div>
  );
};

• includes는 해당 문자가 매개변수와 일치할 시 true를 반환해준다.
• !를 이용해 부정부호를 달아서 일치하게 되면 false를 반환하게 만들어준다.
• 위 함수를 이용해 특수문자를 제한한다.