[bug] MapMarker가 지도를 움직이기 전까지 업데이트 되지 않는 버그

[gomjellie]

<MarkerClusterer
  averageCenter={true}
  minLevel={5}
>
  {stores.map((store) => ( // 👈 react state인 stores가 변경되면 Mapmarker 가 새로 그려지게 구성함
    <MapMarker
      key={`${store.name}-${store.lat}-${store.lng}`}
      position={{ lat: store.lat, lng: store.lng }}
      title={store.name}
      onClick={() => void onSelectStore(store)}
      image={{
        src: 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png',
        size: { width: 24, height: 35 },
      }}
    />
  ))}
</MarkerClusterer>

지도 바깥 부분의 인터랙션에 의해서 stores가 변경되어 MapMarker가 새로 그려지게되는데, 변경된 MapMarker가 지도 이동전까지 그려지지 않는 문제가 있습니다.

Screen.Recording.2025-04-26.at.12.23.27.PM.mov

강제로 새로 그리게하는 방법을 못찾아서 map.panBy(-1, -1)를 호출해서 지도를 살짝 이동시키면 MapMarker가 그려지는것까지 확인했습니다.

[bananackck]

혹시 해결하셨나요? 저도 같은 문제를 겪고 있는데, 로컬에서 React Strict 모드를 끄면 해결되긴하더라고요...
배포 환경에서는 React Strict 모드가 꺼진다고 해서 배포 환경에서는 잘 되긴 합니다.
다만, 이게 맞는 디버깅 방법인지.... 의문이 있어서 근본적인 해결법을 찾고 있습니다...ㅠㅜ
아니면 필터 적용 마다 Map을 리렌더해도 해결되는데, 이건 비효율적일 것 같습니다....

[gomjellie]

@bananackck strict 모드 끄면 해결되는군요...?! 감사합니다! 저는 줌 level 에 따라서 클러스터를 없애는 식으로 해결했습니다. 클러스터만 없애면 또 괜찮아지는것 같더라구요

[JaeSeoKim]

해당 문제를 구현할 수 있는 코드를 올려주실 수 있을까요?

[gomjellie]

@JaeSeoKim https://github.com/gomjellie/sungnam-child-allowance-map 입니다!

https://github.com/gomjellie/sungnam-child-allowance-map/blob/831d08c57634bf7e98f12ef3a9c7e437c706eb09/src/components/KakaoMap.tsx#L562 라인으로 클러스터를 타게하지 않으면 수월하게 재연할 수 있습니다.