✏️ 커스텀 훅(Custom Hook)과 유틸함수(util function)의 차이점

 

 

커스텀 훅(Custem hook)

 

`중복된 로직`을 하나로 묶는다. React에서 커스텀 훅은 상태 로직을 재사용 할 수 있도록 하는 기능이다.

이는 여러 컴포넌트에서 공통적으로 사용되는 상태 로직을 추출하여 하나의 함수로 만들어 사용할 수 있도록 한다.

커스텀 Hook을 만들어 낼 때, 브라우저 API나 외부 시스템과 소통하는 방법과 같은 불필요한 세부 사항을 숨길 수 있다.

컴포넌트의 코드는 목적만을 나타낼 뿐 실행 방법에 대해서는 나타내지 않는다.

리액트의 상태 관리 (useState, useContent, useEffect) 부가적인 기능이나 추상화하거나 조합하여 재사용 가능한 로직을 구현한다.

 

Hook의 이름은 항상 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;

 

 

---

 

 

유틸리티 함수

유틸리티 함수는 일반적으로 특정한 작업을 수행하는 함수로, 

어떤 라이브러리나 프레임워크에 종속되지 않고 독립적으로 작동한다.

 

React의 유틸 함수는 일반적으로 리액트에서 자주 사용되는 기능들을 `모듈화`하여 `재사용`할 수 있도록 도와주는 함수들이다.
이러한 유틸 함수들은 코드의 중복을 줄이고 유지보수성을 높일 수 있고

프로젝트에서 자주 사용되는 함수들을 모아서 별도의 파일로 관리하는 것이 일반적이다.

예를 들어, 배열 안에서 특정 아이템을 찾거나, 문자열에서 특정 문자를 대체하는 등의 기능을 유틸 함수로 구현할 수 있다.

주로 코드의 가독성을 높이고, 중복을 제거하며, 코드를 `모듈화`하기 위해 사용된다.

유틸리티 함수는 특정한 기능을 수행하는 함수(순수함수)로 , 리액트 훅 및 생명주기와는 직접적인 연관이 없어야한다.

 

 

 

예시

// formatDate.js

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

export default formatDate;