React Hooks -(useState, useInput)

useState

useState는 Top level에서는 호출할 수 없다.

useState는 배열을 반환한다. 첫 번째는 값, 두 번째는 값을 변경해주는 함수. 두 파라미터의 이름은 아무렇게나 지어도 상관없으나, 보통은 아이템 이름과 set아이템이름으로 짓는다.

const App = () => {
  //useState
const [item, setItem] = useState(1);
const incrementItem = () => setItem(item + 1);
const decrementItem = () => setItem(item - 1);
  return (
    <div className="App">
      <h1>useState</h1>
      <h2>Start editing to see some magic happen!</h2>
      <h2>{item}</h2>
      <button onClick={incrementItem}>UP</button>
      <button onClick={decrementItem}>DOWN</button>
    </div>
  );
};

export default App;

useInput

... 용법 체크(닷 세 개)
배열 앞쪽에 위치한 값 몇 개만 필요하고 그 이후 이어지는 나머지 값들은 한데 모아서 저장하고 싶을 때가 있습니다. 이럴 때는 점 세 개 ...를 붙인 매개변수 하나를 추가하면 ‘나머지(rest)’ 요소를 가져올 수 있습니다.

let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert(name1); // Julius
alert(name2); // Caesar

// `rest`는 배열입니다.
alert(rest[0]); // Consul
alert(rest[1]); // of the Roman Republic
alert(rest.length); // 2

구조분해 할당 참고
https://ko.javascript.info/destructuring-assignment

const useInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);
  const onChange = (event) => {
    setValue(event.target.value);
  };
  return { value, onChange };
};
const App = () => {
  
  const name = useInput("Mr.");

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

export default App;