🧑🏻🏫 Intro
검색기능을 구현하고 merge를 했는데, QA 중 크리티컬한 버그가 발견되어
이 부분은 해결을 하고 배포를 해야할 것 같다고 해서 받은 문제 중 하나는
검색을 하면 검색어에 맞는 데이터만 노출이 되어야 하는데
초기 데이터가 보였다가 다시 검색어에 맞는 데이터가 노출되는 버그가 있었다.
그러면서 검색어가 쳐질때마다 데이터를 호출하면서
몇글자 안쳐도 엄청나게 호출을 하는 문제가 발생했다...
🧑🏻💻 과정
뭐 처음 기능 구현한 것 처럼 얼마 걸리지 않겠지?
라고 생각했던 1주일 전 내 자신을 패고싶다
우선 에러를 해결하는 방법으로 생각했던 건,
검색어를 조건에 넣는 타이밍을 늦추자! 라는 생각이었다.
그래서 찾아보니 Throttle과 Debounce라는 개념이 있었다.
내가 생각한 방법으로는 Debounce가 더 적합할 것 같아서
Debounce로 포커스를 잡고 구글링을 진행했다.
lodash의 라이브러리가 있다고는 하는데,
직접 구현하는 방법이 더 좋을 것 같아서 직접 구현하는 방식으로 진행해봤다.
💥 code
export const useQueryDebounce = (value: string) => {
const [debounceValue, setDebounceValue] = useState('');
useEffect(() => {
const handler = setTimeout(() => {
setDebounceValue(value);
}, 400);
return () => {
clearTimeout(handler);
};
}, [value]);
return { debounceValue };
};나는 따로 Debounce를 하는 함수를 분리해서 파일로 관리했다.
거기서 검색어를 인자로 받고, 해당 검색어를 setTimeout을 통해 시간을 걸어줬다.
의존성 배열에는 입력되는 인자인 value를 넣어줘서
value가 입력 될 때마다, 해당 이벤트를 실행하도록 해줬는데,
return문을 통해 아직 실행 되지 않은 이벤트를 제거해 주는 clear 과정을 거쳐
결국에는 가장 마지막 이벤트가 실행이 될 수 있도록 해주는 로직을 구현했다.
그래서 나오는 가공되어 나온 debounceValue를 return해서
해당 value를 useQuery 검색어로 넣어 데이터가 호출 될 수 있도록 해줬다.
📌 결과
검색어가 입력 될 때마다 해당 데이터가 호출되는 것은 막았지만
render가 되자마자 호출이 되어서 초기 데이터가 들어오는 것은 막을 수 없었다..
백엔드에게 검색어가 '' 값일때, 데이터를 안주는 로직으로 변경해주면 안되냐고 했지만
프론트에서 ''일때 요청을 막는게 더 빠를 것 같다고 해서 다른 방법을 찾아봐야한다...
참고 블로그
