여러 컴포넌트에서 반복 정의되는 상태 및 관리 로직을 함수의 형태로 분리하는 것

사용 예시

// 카운터 기능을 정의하는 훅
export default function useCounter(initialValue: number){
	const [count, setCount] = useState(initialValue);
	
	const increaseCount = () => setCount(count + 1);
	const decreaseCount = () => setCount(count - 1);
	const resetCount = () => setCount(initialValue);
	
	return {
		count, setCount,
		increaseCount,
		decreaseCount,
		resetCount,
	};
}

// 호출부에선 훅 할당 한 줄로 관련 상태와 로직 간편하게 적용 가능
const { 
		count, setCount, 
		increaseCount, 
		decreaseCount, 
		resetCount 
		} = useCounter(0);

사용하는 이유

1. 중복되는 기능을 적용하기 위해 컴포넌트마다 비슷한 코드를 작성할 필요가 없음
2. 상태 관리와 로직 실행 주체를 페이지/컴포넌트와 분리하여 응집도 향상 및 결합도 약화