클러스터를 사용 중인데, 코드 내부에서 state 값이나 로직을 변경 시 무한 루프가 돌고 있습니다.

[seo337dc]

• 클러스터를 기능이 필요해서 작업을 하고 있는데, 코드 내부에서state나 로직을 변경하면 갑자기 화면이 멈추고 아래 화면에서 'scroll-blocking'이 계속 증가하게됩니다. 노출 되는 데이터 양이 많긴 하는데, 무엇가 리렌더링이 무한으로 발생하는 것 같은데, 클러스터 컴포넌트만 넣으면 계속 발생하고 있습니다. 해결방법이나 원인을 알 수 있을까요?

[JaeSeoKim]

현재 군 복무 중이여서 개발 환경을 구현하는 것이 어려움이 있습니다. 혹시 codesandbox와 같은 Online IDE를 통해 해당 환경을 구성해주실 수 있으신가요?

[JaeSeoKim]

@seo337dc 일단 간단하게 작성한 아래의 코드에서는 해당 문제가 발생하지 않습니다. 해당 오류를 구현하는 코드 및 자세한 설명이 필요합니다.

function(){
  const [positions, setPositions] = useState([]);

  useEffect(() => {
    setPositions(clusterPositionsData.positions);
  },[])

  return (
    <Map // 지도를 표시할 Container
        center={{
          // 지도의 중심좌표
          lat: 36.2683,
          lng: 127.6358,
        }}
        style={{
          // 지도의 크기
          width: "100%",
          height: "450px",
        }}
        onClick={(map, mouseEvent)=> {
          setPositions(p => [...p, {     
            lat: mouseEvent.latLng.getLat(),
            lng: mouseEvent.latLng.getLng(),
          }])
        }}
        level={14} // 지도의 확대 레벨
      >
        <MarkerClusterer
          averageCenter={true} // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
          minLevel={10} // 클러스터 할 최소 지도 레벨
        >
          {positions.map((pos) => (
            <MapMarker
              key={`${pos.lat}-${pos.lng}`}
              position={{
                lat: pos.lat,
                lng: pos.lng,
              }}
            />
          ))}
        </MarkerClusterer>
      </Map>
  );
}

[seo337dc]

넵 한번 최대한 작업하여 codesandbox에 적용해보도록 하겠습니다.

2022년 11월 6일 (일) 오후 10:59, JaeSeoKim @.***>님이 작성:

@seo337dc https://github.com/seo337dc 일단 간단하게 작성한 아래의 코드에서는 해당 문제가 발생하지 않습니다. 해당 오류를 구현하는 코드가 필요합니다.

function(){

const [positions, setPositions] = useState([]);

useEffect(() => {

setPositions(clusterPositionsData.positions);

},[])

return (

<Map // 지도를 표시할 Container

    center={{

      // 지도의 중심좌표

      lat: 36.2683,

      lng: 127.6358,

    }}

    style={{

      // 지도의 크기

      width: "100%",

      height: "450px",

    }}

    onClick={(map, mouseEvent)=> {

      setPositions(p => [...p, {

        lat: mouseEvent.latLng.getLat(),

        lng: mouseEvent.latLng.getLng(),

      }])

    }}

    level={14} // 지도의 확대 레벨

  >

    <MarkerClusterer

      averageCenter={true} // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정

      minLevel={10} // 클러스터 할 최소 지도 레벨

    >

      {positions.map((pos) => (

        <MapMarker

          key={`${pos.lat}-${pos.lng}`}

          position={{

            lat: pos.lat,

            lng: pos.lng,

          }}

        />

      ))}

    </MarkerClusterer>

  </Map>

); }

— Reply to this email directly, view it on GitHub https://github.com/JaeSeoKim/react-kakao-maps-sdk/issues/37#issuecomment-1304807681, or unsubscribe https://github.com/notifications/unsubscribe-auth/APSCWYWWUZ26NUKH6E4K3UTWG62T7ANCNFSM6AAAAAARW3KMBI . You are receiving this because you were mentioned.Message ID: @.***>

[JaeSeoKim]

시간이 많이 지나서 이슈 닫습니다. 추가 의견이 있을 경우 재오픈 부탁드립니다.