Hook in React - useInput

아래 code 는  useInput 이라는 custom hook function 을 사용하여 기존 useStat를 대치하고 있는 것으로  code 를 공부하면서 이해한 것을 정리한 것이다.

 

아래 code 를 copy & paste 하여  돌리면  custom hook function 을 TEST 할 수 있다.

 

import { useState } from "react";

export 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.length <= 10
  const name = useInput("Mr. ", maxlen)
  return (
  <div className="App">
    <h1>Hello </h1>
    <input placeholder="Name" {...name} />
  </div>
  );
}

note) <input placeholder="Name" {...name} /> 와 같이 spread operator 를 이용하면  value 와 onChange property 를 쉽게 setting 할 수 있다.

아니면 아래와 같이 일일이 적어 주어야 한다.

 <input placeholder="Name"  value = {name.value} onChange = {name.onChange}/>

 

note)  maxlen 은 arrow function 을 받은 것임 useInput 으로 넘어온 validator 를 이용하여 return 이 true 이면 setvalue 가 실행이됨

 

note) event 에서 value 값만 뽑아내는 방법을 주의하여 볼것
   const {
      target : { value }
    } = event;
target 아래 object 가 있는데 그 안에 있는 value  를 뽑아내고 있다.

 

 

note) 위는 아래의 교육과장을 이수하면서 정리한 것이다.

https://nomadcoders.co/react-hooks-introduction/lobby?utm_source=free_course&utm_campaign=react-hooks-introduction&utm_medium=site