커스텀 훅과 유틸 함수는 모두 코드 재사용을 촉진하고 유지보수성을 높이는 데 기여하는 도구입니다. 그러나 그들 간에 몇 가지 중요한 차이점이 있습니다.
커스텀 훅(Custom Hook)
-
React Hook 사용: 커스텀 훅은 주로 React의 기본 훅을 이용하여 상태를 관리하거나 부수 효과를 다루는 데에 사용된다. (useState, useEffect, useReducer 등)
-
컴포넌트 로직 제공: 주로 컴포넌트에서 필요로 하는 특정 동작이나 기능을 제공하기 위해 설계되었습니다. 예를 들어, 타이머, 데이터 가져오기 등의 작업을 수행하는 훅을 생성할 수 있습니다.
-
컴포넌트 내/외부에서 호출: 커스텀 훅은 컴포넌트 내부나 외부에서 호출하여 사용된다. 이를 통해 여러 컴포넌트에서 동일한 로직을 재사용할 수 있다.
-
use 접두사 사용: 일반적으로 함수 이름에 use 접두사를 사용하여 커스텀 훅임을 나타낸다.
유틸 함수 (util function)
-
독립 실행형: 유틸 함수는 주로 독립 실행형 함수로, 특정 작업을 수행하고 그 결과를 반환한다.
-
React에 의존하지 않음: 유틸 함수는 주로 React에 의존하지 않습니다. 즉, React의 훅을 사용하지 않고 순수 자바스크립트 또는 다른 라이브러리와 함께 사용될 수 있다.
-
일반적으로 모듈로 관리: 프로젝트에서 자주 사용되는 함수들을 모아서 별도의 파일로 관리하는 것이 일반적이다.
-
React 컴포넌트 내부에서 사용 가능: 유틸 함수는 React 컴포넌트 내부에서 필요한 경우 사용할 수 있습니다. 그러나 주로 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의 특정 기능을 사용하여 컴포넌트에 제공되는 로직을 추상화하고 재사용 가능하게 만드는 데 중점을 둔다. 반면에 유틸 함수는 일반적인 자바스크립트 함수로, React와는 독립적으로 사용 가능한 기능들을 모듈화하여 제공한다. 두 가지는 상황에 따라 선택되어 사용되며, 프로젝트의 구조와 요구사항에 따라 다를 수 있다.
