Debouncing 기법을 이용한 연관 검색 기능 구현 및 성능 향상

 

google 연관 검색어

 

일반적인 사이트를 보면 검색창에 입력을 할 때마다 그에 맞는 연관 검색어를 밑에 dropdown으로 출력 시켜준다.

 

그렇다면 그 방법을 알고 어떤 방식을 쓰는게 좋을지 부터 살펴보자면

 

이 input 창에 검색어를 치게된다면

onChange에 의해 검색어에 입력될때마다 handleInputChange 함수가 실행 될 것이다.

 

그렇다면 연관 검색어를 출력하기 위해서는..

Input 칸에 검색어를 입력 -> Backend api를 통해서 내가 입력한 검색어와 query가 일치하거나 비슷한 결과를 return

-> return 받은 연관 검색어들을 출력

하는 방법이 있을 것이다.

 

그런데 내가 한 글자씩 몇 백개의 글자를 입력할때마다 api 연결 시도를 해버린다면..

이런식으로 input 칸에 내가 12글자를 입력하면

(api 연결 전)개발자도구 Network

이런 식으로 한 글자씩마다 api 연결을 호출하기 때문에 성능 저하가 매우 심하게 될 것이다.

또한 api가 유료라면 query 마다 비용을 책정하기 때문에 매우 많은 비용이 소모 될 것이다.

따라서 한 글자씩 입력 될 때마다 요청을 보내는 것이 아닌 

정해진 시간 (1초)의 간격을 두고 그 사이에 입력이 추가로 들어온다면 요청을 보내지 않고 입력을 더 받고 있다가 정해진 시간이 지난 이후에도 입력이 되지 않는다면 그때서야 요청을 보내서 연관 검색어를 얻어오는 방법을 채택하여

요청을 최소화 시켜 성능을 최대한 향상 시키는 것이 좋을 것이다.

 

 

 

그렇다면 그 정해진 시간 간격을 어떤 식으로 설정하는 것일까?

 

Debouncing(디바운싱)을 이용해서 javascript의 이벤트들을 제어하는 방법이 있다.

보통 지금 상황과 같이 검색 기능에 많은 사용이 이뤄지는 방법이다.

 

밑에 내가 디바운싱을 이용한 코드를 살펴보면 다음과 같다.

 const AutoSearch = useCallback(

 

    debounce(async (term) => {

      try {

        const accessToken = localStorage.getItem('Authorization');

        const response = await fetch('[api 연결]', {

          method: 'POST',

          headers: {

            'Content-Type': 'application/json',

            'Authorization': `${accessToken}` // 토큰 값

          },

          body: JSON.stringify({

            word: term

          }),

        });

        if (!response.ok) {

          throw new Error('Fetch 에러');

        }

        const data = await response.json();

        setAutoCompleteResults(data);

      } catch (error) {

        console.error('자동검색 에러', error);

      }

    }, 1000), // 1초 간격

    []

  );

  const handleInputChange = (event) => {

    const { value } = event.target;

    setSearchTerm(value);

    AutoSearch(value);

  };

 

연관 검색어와 관련된 AutoSearch에 대해서 살펴보면 다음과 같다.

 

1. 입력칸에 입력이 발생되면 handleInputChange 함수가 실행되고 그 값을 AutoSearch에 저장한다.

 

AutoSearch에 값이 들어오면 연관 검색어를 불러오기 위해 api 연결을 해주는데

debounce 기법을 이용해서 1000 (1초) 간격으로 더이상 state가 변경되지 않는다면 그때서야 api 연결을 실행하여

연관 검색어를 return을 받는 방식이다.

 

여기서 debounce 기법을 쓸 때 주의 사항이 몇 가지 있는데...

lodash 라이브러리를 설치 후 그 안에 있는 debounce 함수를 사용

 react에서 debounce를 사용하기 위해 lodash 라이브러리를 설치해야합니다. 이때 react에서 lodash 라이브러리를 사용할 때 유의할 점들에 대해서 살펴보면..

• react에서 lodash를 사용 할때 리렌더링 되는 컴포넌트 내에 debounce를 정의한 함수가 있고, 해당 컴포넌트가 state에 따라 리렌더링이 된다면(여기선 입력창에 입력할때마다) debounce 함수도 재생성되면서 debounce가 초기화 된다. (react에서 컴포넌트 내의 state가 변경되면 리렌더링 된다 라는 중요한 정의)
• 이 버그를 방지하기 위해서는 useCallback을 사용하는데, useCallback을 이용하여 state가 변경되도 debounce함수는 재생성이 되지 않도록 하여 debounce가 초기화 되지 않도록 한다.

 

위와 똑같은 글자들을 1초내에 한번에 입력한다면

아래와 같이 요청이 확실히 줄어든 것을 알 수 있다.