이정환님의 Next.js 강의 중 도서 목록을 검색하는 기능을 만들었고, 별코딩님의 youtube 강의를 들으며 해당 기능에 디바운스를 적용하면 좋겠다고 생각했다. 따라서 실습을 통해 디바운스가 얼마나 효과적으로 서버 비용을 최적화할 수 있는지 알아보고자 한다.
Debounce란 이벤트가 연속적으로 발생할 때, 제일 마지막 이벤트가 발생한 후 일정 시간이 지난 후에 함수를 호출하게 하는 기술을 말한다.
- 특징
- 무수히 많은 이벤트가 연속적으로 발생하더라도 함수의 호출을 제한할 수 있다.
- 과도한 API 호출을 막을 수 있다.
🤔개념
리액트의 리렌더링
디바운스의 원리를 이해하기 위해서는 리액트의 생명주기 중 리렌더링 과정에 대해 숙지할 필요가 있다. 생명주기 중 리렌더링 과정의 마지막 단계에서 Cleanup Effects(useEffect에 전달된 정리함수가 호출), Run Effects(useEffect에 전달된 콜백함수가 호출)가 차례로 수행된다. 만약, 전체 생명주기에 관해 자세히 알고 싶다면 포스팅을 참고하자.
😎실습
디바운스를 활용한 검색 기능 최적화
-
디바운스 적용 전: 우선 디바운스를 적용하기 전의 검색창을 살펴보자. 검색어 상태를 나타내는 search가 바뀔 때마다 fetchAndFilter 함수가 호출되는 것을 볼 수 있다. 이러한 요청이 하나의 클라이언트가 아닌 수백, 수천대의 클라이언트로부터 동시에 이루어진다면 서버의 부하가 커질 것이다.
- 디바운스 적용 후: 아래 코드는 1000ms, 즉 1초의 시간 간격을 두고 타이머가 돌아가는데 1초 이내에 search가 바뀌게 되면 그때마다 clearTimeout을 수행하여 타이머를 정리하고, 그렇지 않으면 콜백이 호출된다.
이제fetchAndFilter함수의 의존성 배열을debouncedSearch로 변경해주기만 하면 디바운스 기능이 완성된다.
커스텀 훅으로 만들기
커스텀 훅으로 만들면 디바운스 기능을 필요로 하는 여러 컴포넌트에서 가져다 사용할 수 있을 것이다.
🧐배운점
평소 다양한 애플리케이션 검색 기능을 보며 검색어 자동완성 기능을 어떻게 구현하는지 궁금했었는데, 기능 이면에는 디바운스라는 기술이 있었다는 것을 이번 기회를 통해 알게 되었다. 프로젝트 중에 같이 프론트엔드를 맡은 팀원이 좋아요 버튼에 디바운스를 적용한 것을 봤다. 당시에는 단순히 더 나은 성능을 위한 방법이라는 것만 알고 넘겼지만, 실습을 통해 해당 기술이 리액트에서의 동작 원리와 어떻게 맞물리는지 자세히 알아보는 시간이 되었다.
