[React] 커스텀 훅 (e.g. 쓰로틀링)

 

# 커스텀 훅이란 ?

반복할 것 같은 로직을 리액트 훅처럼 내가 만들어서 저장해 사용할 수 있게 만든 것이다.

 

# 사용 이유

스크롤 이벤트나 리사이즈 이벤트 관련 함수를 자주 사용해서

쓰로틀링 처리가 필요해서 커스텀 훅으로 만들어서 사용해보려고한다.

 

# 규칙

1. 최상위(at the Top Level)에서만 Hook을 호출해야 한다.

 

반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하지 않아야 한다.

이 규칙을 따르면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장된다. 이러한 점은 React가 useState와 useEffect 가 여러 번 호출되는 중에도 Hook의 상태를 올바르게 유지할 수 있도록 해준다.

 

2. 오직 React 함수 내에서 Hook을 호출해야 한다.

 

이 규칙을 지키면 컴포넌트의 모든 상태 관련 로직을 소스코드에서 명확하게 보이도록 할 수 있다.

 

# 예시

useThrottle.js

import { useRef } from 'react';

export const useThrottle = (func) => {
	const eventBlocker = useRef(null);

	return () => {
		if (eventBlocker.current) return;
		eventBlocker.current = setTimeout(() => {
			func();
			eventBlocker.current = null;
		}, 200);
	};
};

쓰로틀링 로직을 저장해두고

 

사용할 파일.js

import { useThrottle } from '../../hooks/useThrottle';

const 변수 = useThrottle(적용할 함수)
window.addEventListener('scroll', 변수);

사용할 곳에 불러온 후 적용해주면 된다.