[React.js] 네이버 지도 API 마커 줌인아웃 레벨 값 이용하기

1. zoom level 값 변경 시 리렌더링 어떻게?

zoom level에 따라 오버레이와 마커 등을 각각 다르게 렌더링 하고자 하였다. 이에 따라 현재의 zoom level 값을 useState 훅으로 관리할 필요가 있었다. 아래 코드와 같이 getZoom() 메서드를 이용해 보았지만 아쉬움이 많았다. 왜냐하면 zoom level이 변경될 때 즉시 리렌더링이 일어나지 않았기 때문이다(아래 코드에는 작성하지 않았지만 naverMap.current?.getZoom()의 반환 값을 useState에 넣어보기도 하였으나 결과는 동일했다). 그렇다면 어떻게 해야 zoom level 값이 변경될 때 즉시 리렌더링 할 수 있을까?

// (생략)
const naverMap = useRef();
  
useEffect(() => {
    console.log('현재 줌 레벨 : ', naverMap.current?.getZoom());
}, [naverMap.current?.getZoom()]);

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

 

2. onZoomChanged 속성 이용

NaverMap 컴포넌트의 속성 중 onZoomChanged를 이용하면 간단히 해결할 수 있다.

import {
  NaverMap
} from 'react-naver-maps';

const naverMap = useRef();
const [currentZoomLevel, setCurrentZoomLevel] = useState(11); // zoom level 기본값 11

useEffect(() => {
  console.log('현재 줌 레벨 : ', currentZoomLevel);
}, [currentZoomLevel]);

<NaverMap
  ref={naverMap}
  onZoomChanged={level => {
    setCurrentZoomLevel(level);
  }}
>
// (생략)
</NaverMap>