지도 영역좌표 디바운스주기

오늘은 지도 최적화를 위해 지도에 디바운스를 주려고 한다.

<Map // 지도를 표시할 Container
          center={{
            // 지도의 중심좌표
            lat: 33.450701,
            lng: 126.570667,
          }}
          style={{
            width: "100%",
            height: "450px",
          }}
          level={3} // 지도의 확대 레벨
          onBoundsChanged={(map) => setState({
            sw: map.getBounds().getSouthWest().toString(),
            ne: map.getBounds().getNorthEast().toString(),
          })}
        >
        </Map>

위의 코드는 리액트용 카카오맵 라이브러리이다.
onBoundsChanged속성에서 {(map) => setLocation({
sw: map.getBounds().getSouthWest().toString(),
ne: map.getBounds().getNorthEast().toString(),
})}
이 함수를 이용하여 setLocation 값을 변경시키고 있다.
그런데~

location 변수를 console.log에 찍어 보면 위의 gif 파일처럼 지도를 움직일때마다 계속 state 변수의 값이 변한다.
그래서 지도의 최적화를 위해서 디바운스를 주려고 하는거다.

 const locationDebounce = _.debounce((map) => {
    setLocation({
      sw: map.getBounds().getSouthWest().toString(),
      ne: map.getBounds().getNorthEast().toString(),
    });
  }, 500);

이렇게 디바운스를 사용하였다.

그리고 더 나은 최적화를 위해서 useCallback까지 사용하였다.

  const debouncedHandler = useCallback(
    _.debounce((map) => {
      setLocation({
        sw: map.getBounds().getSouthWest().toString(),
        ne: map.getBounds().getNorthEast().toString(),
      });
    }, 500),
    []
  );

useCallback을 사용한 이유는 debounce가 사용될 때 마다 계속 선언이 되면서 실행이 되는거니 최적화를 위해서 useCallback을 사용하여 한번만 선언되고 재사용하기위해 사용하였다!!

~~ 결과물 ~~