중복되는 Hook들을 분리해서 재사용할 수 있게 만든 것이 커스텀 훅(Custom Hook) 이다. React에서 Component는 UI와 로직을 함께 재사용할 수 있지만, 커스텀 훅은 로직만 재사용하는 느낌에 가깝다.

주로 데이터를 가져오거나, 사용자의 온라인 상태를 확인하거나, 채팅방에 연결하는 등의 비즈니스 로직 재사용 목적에서 사용된다.

작명 규칙

• 커스텀 훅의 이름은 반드시 use로 시작해야 한다.
• use 뒤에는 대문자로 시작하는 이름을 사용한다. 예: useForm, useInput, useValidation 등

이러한 작명 규칙을 따르면, 코드에서 state, useEffect 같은 React의 Hook 기능이 어디에 숨어 있는지 쉽게 파악할 수 있다.

커스텀 훅은 state 공유가 아닌 state 저장 로직 공유

커스텀 훅은 하나의 state를 여러 컴포넌트가 공유하는 방식이 아니라, state를 생성하고 관리하는 로직을 공통화해서 재사용하는 것이다.

아래 예제를 보면,

import { useState } from 'react';

export default function Form() {
  const [firstName, setFirstName] = useState('Mary');
  const [lastName, setLastName] = useState('Poppins');

  function handleFirstNameChange(e) {
    setFirstName(e.target.value);
  }

  function handleLastNameChange(e) {
    setLastName(e.target.value);
  }

  return (
    <>
      <label>
        First name:
        <input value={firstName} onChange={handleFirstNameChange} />
      </label>
      <label>
        Last name:
        <input value={lastName} onChange={handleLastNameChange} />
      </label>
      <p><b>Good morning, {firstName} {lastName}.</b></p>
    </>
  );
}

여기서 반복되는 구조는 다음과 같다.

1. 각각 useState로 상태를 만든다.
2. 입력값이 변경될 때 실행될 핸들러 함수를 만든다.
3. JSX에서 value와 onChange를 각각 지정한다.

이처럼 중복되는 로직은 커스텀 훅으로 분리할 수 있다.

useFormInput 커스텀 훅으로 리팩토링