[week8/mission]Debouncing & Throttling

[qowldud]

✏️ 작업 내용

• 검색 기능 구현
• Debouncing & Throttling 훅 구현

#️⃣ 연관된 이슈

#39

📷 작업 결과

안올라가서 노션으로 확인해주세요..!

💡 함께 공유하고 싶은 부분

훅 만드는거는 아직도 뭔가 어려운것같아요.. Throttling은 좀 더 이해를 해봐야할 것 같습니다.

🤔 질문

해당 주차 워크북을 공부하면서 궁금했던 질문들을 남겨주세요.

✅ 워크북 체크리스트

• 모든 핵심 키워드 정리를 마쳤나요?
  
• 핵심 키워드에 대해 완벽히 이해하였나요?
  
• 실습/미션을 수행하였나요?
  

✅ 컨벤션 체크리스트

• pr 제목을 컨벤션에 맞게 작성하였나요?
  
• pr에 해당되는 이슈를 연결하였나요?
  
• 적절한 라벨을 설정하였나요?
  
• 코드리뷰를 요청하기 위해 reviewer를 등록하였나요?
  
• 닉네임/main 브랜치의 최신 상태를 반영하고 있나요?
  

[duwlsssss]

지금은 훅이 매개변수가 없는 함수만 받을 수 있게 제한되어 있어용
다양한 매개변수를 받는 모든 형태의 함수를 받게 하려면, 제네릭을 추가하는 게 좋겠어요!

추가로 callback을 ref로 관리해 useThrottleCallback 훅을 사용하는 컴포넌트가 리렌더링되도 넘긴 callback이 새로 생성되지 않아야 쓰로틀링이 안전하게 동작할 것 같아요!

function useThrottleCallback<T extends (...args: any[]) => void>(
  callback: T,
  delay: number
): T {
  const lastCalled = useRef(0);
  const savedCallback = useRef(callback);

  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  return useCallback((...args: Parameters<T>) => {
    const now = Date.now();
    if (now - lastCalled.current >= delay) {
      lastCalled.current = now;
      savedCallback.current(...args);
    }
  }, [delay]) as T;
}

이런식으로 하면 더 확장성있는 훅이 될 것 같습니다

[oortmealy]

수고하셨습니다~!

[namgungseok12]

looks good!