Clusterer 사용시 marker가 바로 표시되지 않습니다

지도/로컬 API
1

22
11

// 키워드로 장소를 검색하고 마커를 생성합니다
const onSubmit = () => {
    const { keyword } = getValues();
    const ps = new kakao.maps.services.Places();

    ps.keywordSearch(keyword, (data, status, _pagination) => {
      if (status === kakao.maps.services.Status.OK) {
        const bounds = new kakao.maps.LatLngBounds();
        let markers = [];

        for (var i = 0; i < data.length; i++) {
          // @ts-ignore
          markers.push({
            position: {
              lat: data[i].y,
              lng: data[i].x,
            },
            content: data[i].place_name,
          });
          // @ts-ignore
          bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x));
        }
        setMarkers(markers);
        map.setBounds(bounds);
      }
    });
  };

 return (
    <Map
      center={{
        lat: 37.566826,
        lng: 126.9786567,
      }}
      style={{
        width: "100%",
        height: "100%",
      }}
      level={3}
      onCreate={setMap}
    >
      <MarkerClusterer
        averageCenter={true}
        minLevel={2} 
      >
        {markers.map((marker, index) => (
          <MapMarker
            key={index}
            position={marker.position}
            onMouseOver={() => setInfo(marker)}
            onMouseOut={() => setInfo(null)}
          >
            {info && info.place_name === marker.place_name && (
              <div style={{ color: "#000" }}>{marker.place_name}</div>
            )}
          </MapMarker>
        ))}
      </MarkerClusterer>
    </Map>
  );

onSubmit 함수가 실행되면 검색된 결과를 바탕으로 마커가 생성되는데 첫번째 사진처럼 클러스터러만 보이고 마커가 함께 보이지 않습니다. 마우스 휠로 줌 크기를 변경하는 순간 마커가 보이기 시작합니다. 줌 크기를 바꿨다 돌아오면 마커가 보이므로 마커가 없어서 안보이는 것은 아닐텐데 왜 처음엔 보이지 않는것일까요?

2

클러스터링 하는 데이터가 올바른지 확인이 필요해 보입니다.
처음 실행했을 때와 레벨을 변경할 때 데이터가 동일한지 확인해 주세요.

그리고 react-kakao-maps-sdk를 사용하고 계신 걸로 보이는데요.
해당 라이브러리는 저희가 공식 제공하는 라이브러리가 아니기 때문에 자세한 답변드리기 어려운 점 양해 부탁드립니다.

아래는 첨부 코드 일부를 react에서 JS SDK를 사용한 코드로
실행하면 레벨 변경에 관계없이 동일한 정보로 클러스터링 하고 있습니다.
JS SDK를 사용할 때에도 동일한 동작을 하는지 확인해 주세요.

import React, { useEffect, useState, useRef } from "react";

export default function KakaoMap() {
    const container = useRef();
    const [map, setMap] = useState(null);
    const [markers, setMarkers] = useState([]);

    useEffect(() => {
        const script = document.createElement("script");
        script.src = `https://dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=${JS_KEY}&libraries=drawing,services,clusterer`;
        document.head.appendChild(script);

        script.onload = () => {
            kakao.maps.load(() => {
                const center = new kakao.maps.LatLng(37.50802, 127.062835);
                const options = {
                    center,
                    level: 3,
                };
                const map = new kakao.maps.Map(container.current, options);
                setMap(map);

                const  keyword  = '이태원 맛집';
                const ps = new kakao.maps.services.Places();

                ps.keywordSearch(keyword, (data, status, _pagination) => {
                    if (status === kakao.maps.services.Status.OK) {
                        const bounds = new kakao.maps.LatLngBounds();
                        let markers = [];

                        for (var i = 0; i < data.length; i++) {
                            markers.push({
                                position: {
                                    lat: data[i].y,
                                    lng: data[i].x,
                                },
                                content: data[i].place_name,
                            });

                            bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x));
                        }

                        setMarkers(markers);
                        map.setBounds(bounds);
                    }
                });
            });
        };
    }, [container]);

    useEffect(() => {
        if(!map || !markers.length) {
            return;
        }

        const clusterer = new kakao.maps.MarkerClusterer({
            map: map,
            averageCenter: true,
            minLevel: 2
        });

        const m = markers.map(item => {
            return new kakao.maps.Marker({
                position: new kakao.maps.LatLng(item.position.lat, item.position.lng)
            });
        });

        clusterer.addMarkers(m);

    }, [map, markers]);


    return (
        <div>
            <div style={{width:500, height:500}} id="container" ref={container}/>
        </div>
    )
}