[React] useInput Hook 사용하기

기존의 useState를 이용하는 것이 아닌 useInput이라는 함수를 만들어서 input 상태를 관리한다.

 

import { useState } from "react"

const useInput = (init) => {
  const [item, setItem] = useState(init)
  onchange = (event) => {
    setItem(event.target.value)
  }
  return { item, onchange }
}

export default function Counter() {
  const name = useInput()
  return (
    <div>
      <h1>Enter Your Name</h1>
      <input {...name}/>
      <h2>Name : {name.item}</h2>
    </div>
  )
}