useListener

useListener()는 네이버맵 네이티브 이벤트를 React 콜백으로 연결하는 훅입니다. on* props로 처리할 수 없는 이벤트(KVO changed, 생명주기 등)에 사용합니다.

사용법

import { useListener, useMap } from 'react-naver-maps';

function IdleTracker() {
  const map = useMap();

  useListener(map, 'idle', () => {
    console.log('지도 이동 완료');
  });

  return null;
}

인라인 함수를 그대로 전달해도 리스너 재구독이 발생하지 않습니다. useCallback이 필요 없습니다.

시나리오

// KVO changed 이벤트
useListener(overlay, 'position_changed', onPositionChanged);

// Map 이벤트
useListener(map, 'idle', onIdle);
useListener(map, 'tilesloaded', onTilesLoaded);

// 생명주기 이벤트
useListener(overlay, 'added', onAdded);
useListener(overlay, 'draw', onDraw);

파라미터

이름타입설명
targetnaver.maps.KVO | null이벤트 대상. null이면 구독하지 않음
eventNamestring네이버맵 이벤트 이름
listener((...args) => void) | undefined콜백 함수. undefined이면 구독하지 않음

콜백 안정성

내부에서 useRef로 콜백을 안정화합니다 (useEffectEvent 패턴). 콜백 함수가 매 렌더마다 바뀌어도 리스너를 재구독하지 않으며, 호출 시 항상 최신 함수가 실행됩니다.