지도/로컬 API에 대한 문의게시판입니다.
이런식으로 데이터를 순회하면서 state에따라서 마커를 다르게해서 리턴해주고 있는데요
2천개가 찍히니까 엄청 버벅이더라구여… 물론 당연하다고 생각합니다. 그래서 일정 zoom level이상이되면 마커를 사라지게하고싶은데 marker.setMap(null)을 해도 마커가 사라지지 않더라구여… 이게 지도가 리랜더링이 안되는건지 잘 모르겠어서요…!
콘솔은 계속 zoomlevel의 변화를 감지하면서 찍히는데 …
아래 부분은 지도를 랜더링하는 useEffect와 마커를 랜더하고, data가 변할때마다 리랜더링되게 구현한건데 데이터가 바뀌면 바뀐데이터로 마커를 제거했다가 다시 그려줘야되는건가요? 리랜더링을해도 마커자체를 제거하지 않으면 제거가 안되는 건가요?
생성한 마커를 배열로 관리해서
새로 랜더링을 할 때 이전에 생성한 마커들은 marker.setMap(null); 로 삭제해주세요.
그리고 새로 그려진 마커를 배열에 담아 관리해주세요.
1개의 좋아요
우선 답변 정말 감사합니다. 제가 마커들을 리스트로 관리하고 있습니다. 그리고 MapLevel에따라서 그 리스트를 setMap(map) 할지 null을 줄지 조건을 사용하였는데요… 마커가 사라지지가 않습니다ㅠㅠ
newLocation은 내부 변수로 훅에서 나오면 이미 생성된 마커 정보를 알 수 없습니다.
값이 변경되어 다시 훅이 실행돼도 이전 마커들을 지울 수 있도록
상태 변수에 생성한 마커를 관리해주세요.
renderMarkers에서 먼저 생성된 마커를 지우고
데이터에 맞는 마커를 생성 및 newLocation에 담아준 다음
마커 정보를 관리하는 상태 변수에 값을 재할당해주세요.