우당탕탕 말도 안되는 유저 검색 기능 발전시키기🤩 - 2

useQuery를 통해 검색이 잘 되도록 구현해둔 기존 코드에서는 input 창에 검색어를 입력할 때마다 호출을 계속 하고 있었다.

이벤트 발생하는 순간마다 매번 호출하고 있음

예를들어 "춘식" 을 검색하고 싶은데 실제 호출은 "ㅊ, 추, 춘, 춘ㅅ, 춘시, 춘식" 이렇게 매~번 다 가고 있는 것이다.😱

불필요한 호출을 줄이고 검색어를 입력 후 일정 시간이 흐르면 한번만 호출이 가도록 바꾸어보자.

 

여기서 나는 debounce를 사용해주려고 한다!

 

처음 검색 기능을 구현했을 때에는 정말 검색만 되게 ^^.. 성능이나 최적화는 1도 고려하지않고 정말 검색만 되도록 하느라 

디바운스라는 것에 대해서 아예 몰랐었던 바보였는ㄷ...ㅔ....

이번에 대충 만들어둔 검색 기능을 하나하나 고쳐가면서 디바운스에 대해 처음 알게 되었다. 

 

 

debouncing (디바운싱) 은 연이어 호출되는 함수들 중에 마지막 함수 (or 가장 첫 함수) 만 호출하도록 하는 기법이다.

 

커스텀 훅 만들기

커스텀 훅을 만들어서 적용해보자.

import { useEffect, useState } from 'react';

function useDebounceValue(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value); // input에서 입력한 값을 state로 정의한다.

// 일정 시간이 지난 후에도 이벤트가 발생하지 않는다면 setDevounceValue 함수 실행
// 즉, 최종 입력 값이 state에 들어간다.
// 바뀐 최종 값이 return 된다.
// 일정 시간이 지나기 전에 또 input에 값을 입력하면 기존 debounceValue가 return 된다.
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

export default useDebounceValue;

 

코드 수정

import React, { useState } from 'react';
import { useQuery } from 'react-query';
import getSearchUser from '../../api/search/getSearchUser';
import SearchTemplate from '../../components/template/SearchTemplate/SearchTemplate';
import useDebounceValue from '../../hooks/useDebounceValue';

const SearchPage = () => {
  const [keyword, setKeyword] = useState('');

  const debouncedKeyword = useDebounceValue(keyword, 500); // 키워드 값, 0.5초

  const { data, isLoading } = useQuery(
    ['searchUser', debouncedKeyword],
    () => getSearchUser(keyword),
    {
      enabled: !!debouncedKeyword,
      select: (result) =>
        result
          .filter((user) => user.username.includes(debouncedKeyword))
          .slice(0, 10),
    },
  );

  const onChangeSearch = (e) => {
    setKeyword(e.target.value);
  };

  return (
    <SearchTemplate
      onChangeSearch={onChangeSearch}
      searchResultData={data}
      keyword={keyword}
      isLoading={isLoading}
    />
  );
};

export default SearchPage;

 

결과

abc를 검색하면 0.5초 뒤 검색어에 대한 결과가 출력된다.

개발자 도구의 네트워크 탭에서 api가 한번만 불러와진 것도 확인할 수 있다.

 

 

고치지 못한 사항

검색어를 입력했다가 지우면 왜 이렇게 뜨는지 모르겠다 ㅠㅠ

검색어를 지운다면 아예 아무것도 안뜨길 바라는데 자꾸 저렇게 뜬다 이유가 뭘까아아아아악....

한달반만에 리팩토링을 해서 코드를 제대로 이해 못하고 있나 싶기도 하고,, ^^ㅠㅠ

 

+) 2023.02.28 수정 완료!

너무 간단하게 해결 가능한 문제였다..ㅋㅋㅋㅋㅋ 키워드가 있을 때에만 유저 컴포넌트가 뜨게끔 하면 되잖아...!!!!!!

keyword && 추가한게 끝...................................................^^