728x90
반응형
- [ 언어·프레임워크/React.js ][React.js] 네이버 지도 API 마커 리렌더링시 누적(쌓이는) 현상(마커 클러스터)2024-02-29 10:03:081. 마커 누적 현상 마커를 커스텀 오버레이로 만들어 사용했다. 그 이유는 마커에 서버로부터 받은 데이터를 표시해야 했기 때문이다. 동적인 데이터를 렌더링 하기 위해 useEffect 훅을 사용했다. 그런데 데이터가 변경(리렌더링) 될 때마다 동일한 위치에 동일한 마커가 계속해서 쌓이는 현상이 발생했다! 2. useEffect의 return 적용 function MarkerCluster({ data }) { const navermaps = useNavermaps(); const map = useMap(); const [cluster, setCluster] = useState(null); // (생략) const MarkerClustering = makeMarkerClustering(window.naver..
- [ 언어·프레임워크/React.js ][React.js] 네이버 지도 API 마커 클러스터 튜터리얼 따라하기!2024-02-21 16:52:441. 네이버 지도 API 설치 npm install react-naver-maps --save 2. App.js에 NavermapsProvider 적용 NavermapsProvider의 경우-이 글을 작성하는 시점에-공식 문서에는 NaverMapsProvider로 되어 있었고 따라서 로딩 에러가 발생했다. 따라서 NavermapsProvider라고 import 해야 한다. // src/App.js import { NavermapsProvider } from "react-naver-maps"; import NaverMapsMarkerCluster from "./components/NaverMapsMarkerCluster"; function App() { // ncpClientId에 네이버 지도 API 클라..
728x90
반응형