Custom Hook

Custom Hook

자신만의 Hook을 만들어 컴포넌트 로직을 함수로 추출하여 재사용 가능성을 증가시킬 수 있다.
이처럼 React에서는 로직의 재사용성을 높이기 위해 Custom Hook을 만들어 사용한다.

단 아래와 같은 몇 가지 규칙이 존재한다.

사용자 정의 Hook의 이름은 use 로 시작한다

1. 특정 함수가 그 안에서 Hook을 호출하는지 알 수 없기 때문에 이름 규칙이 존재한다.
2. 이러한 규칙을 지키지 않으면 Hook 규칙을 준수하고 있는지 확인할 수 없다.

같은 Hook을 사용하는 두 개의 Component는 state를 공유하지 않는다.

import { useState, useCallback } from "react"

const useInputs = (initialValue) => {
  const [form, setForm] = useState(initialValue)

  const onChangeEventHandler = useCallback((e) => {
    const { name, value } = e.target
    setForm((form) => ({ ...form, [name]: value }))
  }, [])

  return [form, onChangeEventHandler]
}

export default useInputs

위와 같이 Form의 Input에 대한 Custom Hook을 만들어 재사용 가능성을 증가시킬 수 있다.

Custom Hook을 알기 전까지 매번 같은 로직을 반복적으로 작성해야 한다는 느낌이 강했다.
하지만 Custom Hook을 만들어 같은 로직을 하나의 Hook으로 처리한다면 같은 일을 반복적으로 하지 않아도 될 것 같다.