[TIL]240202_useDebounce 훅 만들기

👩🏻‍💻 Today Learn

• Next/font/local 적용
• 최종발표 발제
• 디바운스 훅 분리

useDebounce Hook 만들기

튜터님과의 멘토링 시간 중 다양한 피드백과 팁에 대해 들었는데 그 중 한가지

"디바운싱 로직은 커스텀훅으로 만들어서 사용하는것이 좋음"

그렇다면 바로 분리해보기!

기존로직

 // map 이동 debouncing을 위한 timer 생성
  const timer = useRef<number | null>(null);

 <Map
          center={{ lat: currentLocation.latitude, lng: currentLocation.longitude }}
          level={3}
          style={{ width: '100%', height: '100%' }}
          onBoundsChanged={(map) => {
            // 디바운싱 구현
            if (timer.current) {
              clearTimeout(timer.current);
            }

            timer.current = window.setTimeout(() => {
              setCoordinate({
                sw: map
                  .getBounds()
                  .getSouthWest()
                  .toString()
                  .replace(/\(|\)/g, '')
                  .split(',')
                  .map(Number),
                ne: map
                  .getBounds()
                  .getNorthEast()
                  .toString()
                  .replace(/\(|\)/g, '')
                  .split(',')
                  .map(Number)
              });
            }, 1000);
          }}
        >

Hook 생성 로직

// useDebounce.ts
import { useRef, useCallback } from 'react';

const useDebounce = (
callback: (...args: any[]) => void,
delay: number
): ((...args: any[]) => void) => {
const timer = useRef<number | null>(null);

// useCallback을 사용하여 함수가 다시 생성되는 것을 방지
const debouncedCallback = useCallback(
  (...args: any[]) => {
    if (timer.current) {
      clearTimeout(timer.current);
    }

    timer.current = window.setTimeout(() => {
      callback(...args);
    }, delay);
  },
  [callback, delay]
);

return debouncedCallback;
};

export default useDebounce;

// 사용할 컴포넌트
const debouncedSetCoordinate = useDebounce((map) => {
  setCoordinate({
    sw: map.getBounds().getSouthWest().toString().replace(/\(|\)/g, '').split(',').map(Number),
    ne: map.getBounds().getNorthEast().toString().replace(/\(|\)/g, '').split(',').map(Number)
  });
}, 1000);

return (
<Map
        center={{ lat: currentLocation.latitude, lng: currentLocation.longitude }}
        level={3}
        style={{ width: '100%', height: '100%' }}
        onBoundsChanged={(map) => debouncedSetCoordinate(map)}
      >)

Typescript를 사용하다보니 타입에러가 많이 발생하여 어려움이 있었지만 정상작동 하는것을 확인!

✍🏻 회고

Next.js app Router를 사용하지만 page에서 'use client'를 사용하고 있는 상태이다.
코드리팩토링은 필수적인 과정이 될텐데 무작정 분리하는것이 아니라 사용성에 대해 생각하는것이 중요하다.
멘토링을 토대로 코드를 개선해볼 예정인데 기록해보도록 해야겠다.