이번 편에서는 React Hooks를 조금 더 유연하게 사용할 수 있는 방법인 Custom Hooks를 알아보겠습니다.

Custom Hooks 기본 형태

import React, { useState } from 'react'

const User = () => {
  const [nickname, setNickname] = useState('')

  const updateNickname = event => {
    const nickname = event.target.value

    setNickname(nickname)
  }

  return (
    <div>
      <label>{nickname}</label>
      <input value={nickname} onChange={updateNickname} />
    </div>
  )
}

이번에는 nickname을 변경하면 label에도 반영하는 컴포넌트입니다. React Hooks를 이용하여 State를 만들고, State를 변경하는 함수를 만들고, 그것을 태그에 할당하는 형태입니다.

지금은 간단한지만, 길이 체크, 알파벳과 숫자 체크, API 요청 등 로직을 하나씩 추가하기 시작하면 복잡하게 변하는 것은 금방입니다.

import React, { useState } from 'react'

const useUser = () => {
  const [nickname, setNickname] = useState('')
  const [isAdmin, setBeAdmin] = useState(false)

  const updateNickname = event => {
    const nickname = event.target.value

    setNickname(nickname)
  }

  return [nickname, updateNickname]
}

const User = () => {
  const [nickname, setNickname] = useUser()

  return (
    <div>
      <label>{nickname}</label>
      <input value={nickname} onChange={setNickname} />
    </div>
  )
}

이 예시와 같이 별도의 함수로 분리해서 작성할 수 있으며, 이것을 Custom Hooks라고 합니다.

이 패턴은 당장에 작성해야 할 코드는 많지만 장기적으로 아래의 장점을 얻을 수 있습니다.

• 컴포넌트와 로직을 분리할 수 있습니다.
• 컴포넌트와 로직을 조합하는 형태로 작성할 수 있습니다.
• 여러 컴포넌트에서 재활용이 가능하기 때문에 중복 코드를 줄일 수 있습니다.
• 여러 React 프로젝트를 진행한다면 효용성 좋은 Custom Hooks를 공유하며 기술적 경험을 축적할 수 있습니다.