브라우저 검색 기능을 배우면서 검색을 위한 단어를 변수로 지정해서 단어를 타이핑하면서 바로 검색이 되도록 코드를 작성했다.
하지만 바로 검색을 하도록 구현하면 사진처럼 한 가지 문제가 있었는데 타이핑이 될때마다 gragh-ql로 검색 요청이 들어간다는 점이다. 모든 입력에 대해 굳이 불필요한 요청이 들어가면서 백엔드 컴퓨터의 메모리, cpu 낭비가 심해져 효율이 떨어지게된다.
해당 문제점을 해결해주는 기능에 대해 간단히 정리해보겠다.
💡 Debounce ?
반복적인 특정 동작을 반복되는 과정에서 강제적으로 대기하는 것.
대표적으로 검색 기능 구현 시 사용하는데 setTimeout 함수와 비슷하게 제시된 시간 이후 특정 이벤트가 발생하지 않으면 마지막으로 발생된 이벤트를 실행시키도록 만들 수 있다.
Debounce 기능을 구현해놓은 Lodash 라이브러리( Lodash Docs로 연결 )로 간단하게 기능을 구현할 수 있으며 _.debounce(()=>{} : 실행될 함수,시간) 형식으로 작성한다.
관련해서 코드로 보자면,
//search : input에 입력되는 값 event로 호출
//event 발생할 때마다 검색 요청
const onChangeSearch = (event) => {
refetch(search : event.target.value, page : 1);
};
//getDebounce (Lodash)
const onChangeSearch = (event) => {
getDebounce(event.target.value);
};
const getDebounce = _.debounce((data) => {
refetch({ search: data, page: 1 });
setKeyword(data);
// keyword : 검색 요청에 들어갈 변수, data : input 입력값
}, 1000); // 마지막 입력 1s 후 입력 없을 시 요청 실행
input 태그에 입력한 값(event.target.value => data)이 debounce 기능에 들어가고 debounce안에 작성된 함수가 실행된다.
💡 Throttle ?
무한 스크롤과 같이 여러번 발생하는 이벤트를 제시한 시간 이전에 실행되는 것을 막고 이후 실행 되도록 만드는 기능이다. 이벤트 발생 시간 이후에 일정 시간을 기다리고 다시 이벤트를 실행 후, 재차 기다리는 작업을 반복한다.
Lodash 라이브러리 이용 시에 debounce와 _.throttle(()=>{}:실행될 함수, 시간) 동일한 형식으로 사용할 수 있다.
코드로 관련 부분을 작성할 경우 추가적으로 관련 내용을 보충하도록 하겠다.
- Debounce / throttle 관련 도움될 만한 블로그
👉🏻 라떼군 이야기, All-in-one
