[React.js] 네이버 지도 API 지도 센터 위경도 값 변경 감지 성능 개선

1. useState로 관리하는 지도 센터 값 성능 문제

지도의 센터 위경도 값에 따라 breadcrumb의 표시 정보가 달라지는 기능을 구현하였다. breadcrumb의 정보가 자동으로 변경되려면 센터 위경도 값의 변경을 감지해야 하므로 useState를 사용하였는데 문제는 마우스 좌클릭하여 지도를 이동할 때마다 무수히 많은 센터 위경도 값이 생성되어 그만큼의 리렌더링이 일어난다는 것이다.

지도는 "react-naver-maps": "^0.1.2" 라이브러리를 사용했는데 "NaverMap" 컴포넌트에 "onCenterChanged" props로 setState를 넘기면 지도의 중앙 위경도 값을 state로 관리할 수 있다.

<NaverMap
    (생략)
    onCenterChanged={latLng => setMapCenterPoint(latLng)}
>
(생략)
</NaverMap>

위와 연관된 useState 예시 코드는 아래와 같다.

const [mapCentorPoint, setMapCenterPoint] = useState({});

마우스를 움직여 지도의 중앙이 변경될 때마다 수없이 많은 위경도 값이 mapCentorPoint 상태를 변경하는 상황이다.

 

2. debounce로 문제 해결

"onCenterChanged" 이벤트가 너무 자주 호출되어 성능 문제가 발생하는 경우인데, 상태 업데이트를 "디바운스"하거나 "스로틀링(throttling)"하여 호출 빈도를 줄였고, 이를 통해 불필요한 상태 업데이트와 리렌더링을 방지하였다. 여기에서는 lodash 라이브러리의 debounce를 이용하였다.

1) lodash 설치

npm install lodash

 

2) debounce 적용 코드

import React, { useState, useCallback } from 'react';
import { debounce } from 'lodash';

const MyComponent = () => {
  const [mapCenterPoint, setMapCenterPoint] = useState({});
  
  const updateMapCenterPoint = useCallback(
    debounce((latLng) => {
      setMapCenterPoint(latLng);
    }, 400), // 400ms 지연
    []
  );

  return (
    <NaverMap
      (생략)
      onCenterChanged={(latLng) => updateMapCenterPoint(latLng)}
    />
    (생략)
    </NaverMap>
  );
};