useDebounce
자연스러운 검색을 위해 사
사용자가 검색어를 연속으로 입력할 때, 일정 시간(여기서는 200ms) 동안 입력이 없을 때에만 검색 요청을 보낸다. 이를 통해 불필요한 API 요청을 줄인다.
// **useDebounce Hook**
import { useEffect, useState } from 'react';
export const useDebounce = (value: string, delay: number) => {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const timer = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => {
clearTimeout(timer);
}; //value 변경 시점에 clearTimeout
}, [value]);
return debouncedValue;
};
// 사용
const debouncedSearchTerm = useDebounce(searchInput, 200);
useEffect(() => {
if (debouncedSearchTerm) {
getRelatedResult(); // 연관 검색어 api 호출
} else {
setRelativeSearch([]); // 빈배열로 초기화
}
}, [debouncedSearchTerm]);
useRef
검색창 이외의 영역을 클릭했을 때 검색창을 닫고 검색어를 초기화 / 입력 창의 포커스를 제거
const wrapperRef = useRef<null | HTMLDivElement>(null);
const inputRef = useRef<null | HTMLInputElement>(null);
const handleOutsideClick = (event: MouseEvent) => {
// 검색창 이외의 영역을 클릭한 경우를 판별
if (
wrapperRef.current &&
event.target instanceof Node &&
!wrapperRef.current.contains(event.target)
) {
// input 필드와 결과 창 외부 클릭 감지
setIsSearchOpen(false); // 검색창 닫기
setSearchInput(''); // 검색어 초기화
if (inputRef.current) {
inputRef.current.blur(); // 검색어 입력 창 포커스 제거
}
}
};