Wine 요구사항

와인 데이터를 가격별로 필터링을 하는 기능을 스크롤 바로 구현하는 과정에서의 트러블 슈팅이다!

스크롤을 움직여 값이 변경될 때 해당 가격 범위안에 있는 데이터를 가져와 페이지에 출력시키는 것을 목표로 하였다.

디바운스 훅

문제상황

스크롤을 움직일 때마다 값이 변경되어 수 많은 API 요청을 하는 문제가 발생하였다.

해결방안

useDebounce훅 사용

• 연속 호출을 해결할 수 있는 기법 ??

  • 쓰로틀링: 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것
  • 디바운싱: 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것

• https://github.com/Codeit-FE08-Part3-Team6/wine/pull/83

디바운싱은 값이 계속 바뀌는 상황에서 특정 시간 동안 변경이 없을 때만 동작을 수행하도록 한다.

예를 들어, 검색 입력 필드에서 사용자가 입력할 때마다 API 요청을 보낸다면, 디바운싱을 통해 입력이 끝난 후 일정 시간(delay)이 지난 시점에만 요청이 이루어지게 할 수 있다.

와인 가격 범위를 설정할 때, 사용자가 드래그 중인 중간 값보다 최종적으로 멈춘 값이 중요하다!

쓰로틀링은 특정 주기마다 요청을 보내므로 드래그 중간의 값으로도 API 요청이 발생할 수 있어 불필요한 중간 데이터 요청이 많아질 수 있다.