[React.js] 커스텀 훅(Custom Hook)과 유틸 함수(util function)에 대해서

❗ 커스텀 훅(Custom Hook)

React에서 커스텀 훅(Custom Hook)은 상태 로직(stateful logic)을 재사용할 수 있도록 하는 기능이다.

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

커스텀 훅은 보통 use라는 접두사를 사용하여 함수의 이름을 정의하며, React의 기본 훅(useState, useEffect 등)을 이용하여 구현된다. 또한 JSX 코드나 렌더링과 관련된 코드를 포함해서는 안 되며, 컴포넌트 내부나 외부에서 호출하여 사용한다.

커스텀 훅을 사용하면 코드의 중복을 줄이고, 컴포넌트의 재사용성과 유지보수성을 높일 수 있다.

예를 들어, API 호출, 폼 데이터 관리, 타이머/애니메이션 등의 다양한 기능을 커스텀 훅으로 만들어 사용할 수 있다.

---

❗ 유틸 함수 (util function)

React의 유틸 함수는 일반적으로 리액트에서 자주 사용되는 기능들을 모듈화하여 재사용할 수 있도록 도와주는 함수들이다.

이러한 유틸 함수들은 코드의 중복을 줄이고 유지보수성을 높일 수 있으며,

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

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

---

❗ 유틸 함수와 커스텀 훅의 차이점

둘 사이의 차이점을 설명하기 위해 예제를 살펴보겠다.

 

날짜 문자열을 특정 형식으로 지정하는 유틸 함수는 다음과 같다.

function formatDate(dateString, format) {
  const date = new Date(dateString);
  return date.toLocaleDateString(format);
}

이 함수는 날짜 문자열과 형식 문자열을 인수로 사용하고 지정된 형식에 따라 형식이 지정된 날짜 문자열을 반환한다.

날짜 형식이 필요한 응용 프로그램의 어디에서나 호출할 수 있다.

 

이제 타이머를 사용하여 매초 구성 요소의 상태를 업데이트하는 커스텀 훅의 예제를 살펴보자.

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;
}

이 커스텀 훅은 초기 시간 값을 인수로 사용하고 setInterval 및 useEffect를 사용하여 매초 업데이트된 시간 값을 반환한다.

다음과 같이 타이머 기능을 제공하기 위해 기능 구성 요소에서 사용할 수 있다.

function Timer() {
  const time = useTimer(0);

  return (
    <div>
      {time}
    </div>
  );
}

---

❗ 정리

 

유틸 함수는 특정 작업을 수행하고 애플리케이션의 여러 부분에서 재사용할 수 있는 독립 실행형 함수다.

일반적으로 입력 인수를 받아 계산을 수행하고 결과를 반환한다.

 

반면에 커스텀 훅은 React hook을 사용하여 구성 요소에 특정 동작이나 기능을 제공하는 기능이다.

재사용이 가능하도록 설계되어 기능 구성 요소 내에서 호출할 수 있다.

 

요약하면 유틸 함수는 애플리케이션의 어느 곳에서나 사용할 수 있는 독립 실행형 함수인 반면

커스텀 훅은 React hooks를 사용하여 구성 요소에 특정 동작이나 기능을 제공하는 함수이다.