useInput

처음으로 다루는 훅은 useInput이야

useInput은 기본적으로 input을 업데이트 해

hooks 들의 다른 점을 찾아보자.

react class 방식으로도 만들어서 inoutUse를 class로 만들었을 때와 hooks으로 만들었을 때의 차이를 봐보자

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

export default function App() {
  const useInput = (initialValue) => {
    const onChange = (event) => {
      console.log(event.target);
    };
    const [value, setvalue] = useState(initialValue);
    //어떤 변화를 주기 전에 기본값 eugeius을 value와 함께 return하고싶다
    return { value, onChange };
    //onChange 도 return 해주자
  };
  const name = useInput("Mr.");
  return (
    <div className="App">
      <h1>Hello</h1>
      <input placeholder="Name" {...name} />
      {/* value={name.value} 대신 {...name} 사용 가능 */}
      {/* <input placeholder="Name" {...name} onChange={name.onChange}/>  대신 {...name} 사용 가능 
    이것은 그냥 {...name}이라고 적음으로써 그냥 안에있는 모든 것을 unpack 해준다.
    */}
    </div>
  );
}