Debouncing을 이용한 검색 최적화

seongjin·2023년 3월 1일

트러블슈팅

목록 보기

8/8

Debouncing이란

연달아 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것이다.

문제 상황

프로젝트 팀원이 구현한 검색기능에는 검색 단어를 칠때마다 axios 요청이 실행되는 문제점이 있었다. 예를들어 '바나나'를 검색했을때 ㅂ,바,바ㄴ,바나,바난,바나나 총5번의 요청이 발생하는 것이였다. 이것은 서버에 부담을 주고 유료 api를 사용했을경우 비용이 많이 발생할 수 있다.

이전코드


const search = () => {
  //... axios.get(~~)
}


useEffect(() => {

  search()

},[keyword])

해결방안

useEffect와 setTimeout 그리고 clearTimeout을 이용하여 디바운싱 처리를 하였다.

useEffect

함수형 리액트에서 컴포넌트가 렌더링 될때 라이프 사이클을 제어할 수 있도록 하는 hook이다.
component가 mount, update, unmount됐을 때 작업을 처리할 수 있다.

useEffect(()=>{..code});
useEffect(() => {..code}, []);
useEffect(() =>{..code}, [state]);
useEffect(()=>{ return(() => func()) });

1번 마운트시 , 업데이트시 안에 있는 코드 실행.
2번 의존성 배열을 추가하게 된다면 맨 처음 마운트 될때만 코드 실행
3번 의존성 배열에 state값이 있다면 state값을 주시하다가 값이 변할때마다 코드 실행
4번 useEffcet은 함수를 반환할 수 있는데 cleanup 함수라고 한다. unmount시 실행되는 함수. cleanup 함수 위에 코드가 같이 있다면 cleanup 함수가 먼저 실행되고 그 다음 위에 코드 실행.

현재코드

 useEffect(() => {
	// 나중에 실행
  const debounce = setTimeout(()=> {
      search()
    }, 200 )

  return () => {
    // 먼저 실행
    clearTimeout(debounce)
  }
  },[keyword])