[React] 커스텀 훅

🎈 custom hook 이란

로직 반복을 줄이기 위해 선언하는 훅
useState, useEffect, useCallback 등 내장 훅을 조합해서 만듦
커스텀 hook으로 만든 기능은 각 컴포넌트에서 독립된 상태를 가짐

input 관리, fetch 요청 시 자주 사용
커스텀 훅의 이름은 use로 시작해야 함 (useInput 등)

🎈 예시

여러개의 입력폼의 상태/핸들러를 관리하는 커스텀 훅 useInput()

1. 선언

import { useState } from 'react'

const useInput = value => {
  const [value, newValue] = useState("")
  const onChange = event => setValue(event.target.value)
  
  return { value, onChange }
}

2. 사용

import useInput from '경로'

const signIn() => {
  const userid = useInput()
  const password = useInput()
  
  return (
    <input id="userid" {...userid} />
    <input id="password" {...password} />
  )
}