[React.js] 네이버 지도 API 지도 좌표 경계 확인하여 렌더링 줄이기

1. 히트맵 적용 후 성능 이슈

히트맵에서 점의 크기는 radius 값으로 설정하는데 이 값이 100 이상 넘어가면 렌더링 성능이 떨어졌다. 이 문제를 해결하기 위한 하나의 방법으로 화면상에 노출된 좌표(위경도) 데이터만 필터링하는 방법을 적용해 보았다.

 

2. 지도 좌표 경계 확인 이용

화면상에 노출된 좌표를 필터링하기 위해서는 지도 좌표 경계 확인이 필요했다. 아래는 관련 문서이다.

※ React Naver Maps(지도 좌표 경계 확인하기) : https://zeakd.github.io/react-naver-maps/examples/map-tutorial-4-bounds/

나의 경우 화면에 노출된 지도의 최대/최소 좌표 정보 획득이 필요했기 때문에 위 문서의 소스 코드 자체는 크게 도움이 되지 않았지만, useRef를 이용해 해당 데이터에 접근 가능할 수 있겠다는 힌트를 얻었다.

<NaverMap
  ref={setMap}
  (생략)
>
(생략)
</NaverMap>

위 코드에서 ref 속성 값 setMap의 current.bounds 속성에 내가 찾는 화면에 노출된 지도의 최대/최소 좌표 정보가 있었다. 이 값과 filter 배열 메서드를 이용해 화면에 노출된 좌표 정보만 필터링할 수 있었다.

const {
  _max: { _lat: maxLat, _lng: maxLng },
  _min: { _lat: minLat, _lng: minLng },
} = setMap.current.bounds;

// latLngList 배열에서 화면 내 좌표 객체만 필터링
const result = latLngList.filter(
  ({ longitude, latitude }) =>
    longitude <= maxLng &&
    latitude <= maxLat &&
    longitude >= minLng &&
    latitude >= minLat,
)

---

2024-12-27 추가

나의 경우 위 방식을 useEffect에 적용했고, 의존성 배열에는 지도에 좌클릭하여 드래그할 시 변경되는 지도 중앙의 위경도 값을 적용했다.

지도 중앙 위경도 값 관리는 아래 링크를 참고하자!

https://postforty.tistory.com/489

useEffect를 적용한 예제는 다음과 같다.

// 지도 중앙 위경도 변경 관리(디바운스 적용)
const [mapCentorPoint, setMapCenterPoint] = useState({});
const updateMapCenterPoint = useCallback(
  debounce(latLng => {
    setMapCenterPoint(latLng);
  }, 400),
  [],
);

// 지도 좌표 경계 변경 관리
const [arr, setArr] = useState([]);
const [newArr, setNewArr] = useState([]);

useEffect(() => {
  if (naverMap.current?.bounds) {
    const {
      _max: { _lat: maxLat, _lng: maxLng },
      _min: { _lat: minLat, _lng: minLng },
    } = naverMap.current.bounds;

    const result = arr.filter(
      ({ lon, lat }) =>
        lon <= maxLng && lat <= maxLat && lon >= minLng && lat >= minLat,
    );

    setNewArr(result);
  }
}, [mapCentorPoint]);

// JSX
return (
  <NaverMap
    ref={naverMap}
    // (생략)
    onCenterChanged={latLng => updateMapCenterPoint(latLng)}
  >
  // (생략)
)