커스텀 훅과 유틸리티 함수의 차이

커스텀 훅 (Custom Hook):

• 여러 컴포넌트에서 공통적으로 사용되는 상태 로직을 추출하여 하나의 함수로 만들어 재사용한다.
• 리액트의 상태 관리 (useState, useContext 등)나 부가적인 기능 (useEffect 등)을 추상화하거나 조합하여 재사용 가능한 로직을 구현
• 커스텀 훅의 접두사는"useㅡㅡ"로 시작해야 한다.
• JSX 코드나 렌더링과 관련된 코드를 포함해서는 안 된다.(return 부분의 html)
• 컴포넌트 내부나 외부에서 호출하여 사용한다.(유틸리티 함수에서도 사용 가능)
• 예를 들어, API 호출, 폼 데이터 관리, 타이머/애니메이션 등의 다양한 기능에서 사용

// useCounter.js
import { useState, useEffect } from 'react';

function useTimer(initialTime) {
  const [time, setTime] = useState(initialTime);

  useEffect(() => {
    const timer = setInterval(() => {
      setTime((prevTime) => prevTime + 1);
    }, 1000);

    return () => clearInterval(timer);
  }, [initialTime]);

  return time;
}

export default useCounter;

유틸리티 함수 (Utility Function):

• 유틸리티 함수는 일반적으로 특정한 작업을 수행하는 함수로, 어떤 라이브러리나 프레임워크에 종속되지 않고 독립적으로 작동한다.
• 주로 코드의 가독성을 높이고, 중복을 제거하며, 코드를 모듈화하기 위해 사용된다.
• 유틸리티 함수는 특정한 기능을 수행하는 함수(순수함수)로, 리액트 훅 및 생명주기와는 직접적인 연관이 없어야한다.

// formatDate.js

function formatDate(date) {
  const options = { year: "numeric", month: "long", day: "numeric" };
  return new Date(date).toLocaleDateString(undefined, options);
}

export default formatDate;

참고 사이트
https://velog.io/@jjh099/React-utils%EC%99%80-hooks-%EA%B5%AC%EB%B6%84%ED%95%98%EA%B8%B0#utils%EC%9C%A0%ED%8B%B8%EB%A6%AC%ED%8B%B0