[React Hooks] useInput

• 사용법

1. Input이나 컴포넌트에 대한 속성, 함수들을 객체 형태로 return한다.
2. {...} ES6 Spread 연산자를 이용하여, props로 넘겨준다.

• 예제

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

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

const App = () => {
  const name = useInput("Mr.");
  return (
    <div className="App">
      <input 
      placeholder = "Name" 
      {...name} // value = {name.value} onChange = {onChange} 
      />
    </div>
  );
};

export default App;

Reference

노마드 코더 - 실전형 리액트 Hooks 10개 # 1.1 useInput
https://nomadcoders.co/react-hooks-introduction/lectures/1591