6. debouncing

기존에 진행한 프로젝트의 성능을 개선 할 수 있는 방법을 찾는도중

디바운싱 개념을 알게되었다.

나중에도 유용하게 사용할 수 있을 것 같아 정리해보았다.

 

1. 개념 및 사용 이유

디바운싱은 연속적으로 함수 실행 요청을 하는 경우

가장 마지막 요청만 수행하는 것을 의미한다.

 

디바운싱은 연속적으로 함수를 실행하는 것은 서버에 부담을 줄 수 있기 때문에,

이 부담을 경감하기 위해 사용 될 수 있다.

2. 적용 예시

아래 코드는 계정을 검색 할 수 있게 만들어주는 코드다.

useEffect(() => {
    if (userInput) {
       getSearchUser(userInput)
       .then((data) => {
       setUserArr(data);
       })
       .catch((error) => {
       console.log(error);
       });
      }
    }, [userInput]);

구체적으로,

처음에 페이지가 렌더링 되고 검색할 계정을 input창에 입력할 때마다

getSearchUser라는 API를 요청하는 함수를 호출하도록 만든

디바운싱 적용 전 상태다.

 

이 코드는 input창에 입력이 될 때마다

API를 요청하기 때문에

input창에 입력이 될 때마다 마찬가지로 HTTP 요청을 하게 된다.

이는 서버 리소스를 많이 요구하게 만드는 것으로 궁극적으로 성능저하로 이어지게 된다.

 

입력창에 '쿠키'라는 단어를 입력하면 개발자도구에는 다음과 같이 결과와 네트워크 상태가 보여진다.

입력이 될 때마다 API요청이 발생되는 것을 확인 할 수 있다.

요청 수는 다음과 같다.

아래 코드는 디바운싱을 적용한 코드이다.

useEffect(() => {
    const newTimer = setTimeout(() => {
      if (userInput) {
       getSearchUser(userInput)
         .then((data) => {
           setUserArr(data);
         })
         .catch((error) => {
           console.log(error);
         });
     }
    }, 400);

    return () => {
      clearTimeout(newTimer);
    };
  }, [userInput]);

이 코드의 원리는 input창에 입력이 될 때마다

setTimeout을 통해 0.4초 후 API 요청 하는 함수를 호출하는 것이다.

 

그리고 더 구체적으로 코드를 설명하자면 다음과 같다.

 

1. useEffect를 통해 리턴문을 제외한 useEffect안의 함수들이 실행 된다.

 

2. setTimeout 함수가 첫번째로 실행이 된 후

     input에 입력이 될 때마다 의존성 배열인 userInput이 변화되기 때문에,

     의존성 배열이 변화 될 때마다 useEffect 안의 함수들이 실행이 된다.

 

3. 이 때 useEffect안에서 리턴문이 먼저 실행을 하기 때문에

     요청된 이전의 setTimeout함수는 clearTimeout함수를 통해 제거된다.

 

4. 이 후 갱신된 userInput값으로 리턴 문 위에 있는 setTimeout함수가 다시 실행된다.

 

5. 입력이 계속된다면 이 과정이 계속 반복된다.

     정리하면 input창에 0.4초내에 입력이 되지 않는다면, 마지막에 호출된 setTimeout함수만 호출이 되고

     이전의 setTimeout함수요청들은 clearTimeout함수를 통해 제거되므로

     API요청이 한번만 발생하게 되는 것이다.

 

결과는 똑같이 두개의 계정이 검색되지만,

네트워크 화면과 요청된 수는 다음과 같다.

 

요청 수가 감소된 것을 확인 할 수 있다.

 

 

3. 결론

위와 같이 연속적으로 호출하는 함수가 있다면

디바운싱을 활용하여 성능을 최적화 할 수 있으니 디바운싱 사용을 고려해보자!

 

참고 사이트

https://www.freecodecamp.org/news/javascript-debounce-example/

Debounce – How to Delay a Function in JavaScript (JS ES6 Example)