Debounce 화면안에 보여지는 매물만 리스트목록에 추가하기

맵의 경계값에 따라 해당안에 있는 좌표만 반환하여 보여주는 함수

const bounds = () => {
    if (!map && !mapState) return;
    const bounds = new kakao.maps.LatLngBounds(mapState?.sw, mapState?.ne!);
    const filterdata = clusterData?.allpost?.posts.filter((p: any) => {
      const contain = bounds.contain(
        new kakao.maps.LatLng(p.itemGeoLocation.lat, p.itemGeoLocation.lng),
      );
      return contain;
    });
    setSelectedData(filterdata);
  };

맵 화면 확대/축소/이동 수많은 이벤트 발생
이를 위해 debounce나 throttle을 사용하여 조절

• debounce는 특정 이벤트가 끝난 후 설정한 값을 실행 시킴
• throttle은 설정한 시간 값마다만 이벤트를 실행을 시킨다
  화면이동 하면서 계속 매물 리스트가 변화하는것 보다
  화면이동이 끝났을때 매물만 보여지는것이 더 깔끔해보여
  Debounce를 사용하여 구현하였다.

 useEffect(() => {
    const debounce = setTimeout(() => {
      return bounds();
    }, 400);
    return () => clearTimeout(debounce);
  }, [mapState]);