[React] 커스텀 훅(Custom Hooks) 만들기

리액트 훅은 함수 컴포넌트 내에서 상태와 생명주기 기능을 사용할 수 있게 해주는 기능입니다. useState, useEffect와 같은 기본 훅은 자주 사용되지만, 더 복잡한 로직이 필요할 때는 기본 훅을 조합해 커스텀 훅을 만들어 사용할 수 있습니다.

커스텀 훅(Custom Hooks)은 "use"라는 접두어로 시작하는 함수로, 내부에서 다른 훅을 사용할 수 있습니다.
커스텀 훅을 사용하면 컴포넌트 간의 공통 로직을 추상화하여 코드 중복을 줄이고, 컴포넌트의 복잡성을 낮출 수 있습니다.

커스텀 훅 구현 방법

기존의 훅과 동일하게 함수로 정의하고, use라는 접두어를 사용하여 훅이라는 것을 명시합니다.

import { useState } from 'react';

function useForm(initialValues) {
  const [values, setValues] = useState(initialValues);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({
      ...values,
      [name]: value,
    });
  };

  const resetForm = () => {
    setValues(initialValues);
  };

  return { values, handleChange, resetForm };
}

export default useForm;
}

export default useWindowSize;

useForm 훅을 사용하면 폼 입력값을 상태로 관리하고, 입력값을 초기화하는 기능도 간단하게 구현할 수 있습니다.

커스텀 훅을 만들 때는 몇 가지 주의할 점

• "use"로 시작해야 한다
  리액트는 훅을 식별할 때 함수 이름이 "use"로 시작하는지 여부를 기준으로 판단합니다. 따라서 커스텀 훅은 항상 "use"로 시작해야 합니다.
• 훅의 규칙을 준수해야 한다
  커스텀 훅도 일반 훅과 마찬가지로, 함수 컴포넌트나 다른 훅 내부에서만 호출되어야 합니다. 또한, 항상 같은 순서로 호출되어야 합니다.
• 반환값이 일관되도록 유지한다
  커스텀 훅의 반환값이 객체라면 구조를 일정하게 유지해 코드의 가독성과 유지보수성을 높일 수 있습니다.