React에서 더 쉽게 kakao maps-sdk 사용하기 - 마커

• 키워드 검색을 할때 data를 이용해 marker들의 위치를 담은 배열을 생성해주고 setMarkers로 상태를 업데이트 한다.

• jsx에서 컴포넌트의 props를 전달해 쉽게 여러개의 마커와 커스텀오버레이 설정이 가능하다

• 주석으로 설명을 덧붙인다

const { kakao } = window;
const [info, setInfo] = useState()
const [markers, setMarkers] = useState([])
const [map, setMap] = useState()
const [searchInputValue, setSearchInputValue] = useState("");
const [keyword, setKeyword] = useState("");

useEffect(() => {
    if (!map) return
    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)
      }
    })
  }, [map, keyword])

const handleKeyPress = (e) => {
  if (e.key === "Enter") setKeyword(searchInputValue);
};

// 현재 클릭한 마커로 업데이트 및 센터 이동
const handleClickMarker = (e, marker) => {
    setInfo(marker);
    map.panTo(e.getPosition());
  };

...

return (
	<...>
		<Map
        center={{
          lat: 37.566826,
          lng: 126.9786567,
        }}
        style={{
          width: "100%",
          height: "200px",
          borderRadius: "5px",
          border: "2px solid #e2e2e2",
        }}
        onCreate={setMap}
        level={3}
      >
        // 마커를 맵에 생성 
        // position 속성으로 마커의 위치를 정해주고
        // 클릭이벤트 지정한다.
        {markers.map((marker, idx) => (
          <div key={idx}>
            <MapMarker
              position={{ lat: marker.position.lat, lng: marker.position.lng }}
              onClick={(e) => handleClickMarker(e, marker)}
              // 마커 이미지 변경이 가능하다
              image={{
                src: "./marker.png",
                size: {
                  width: 30,
                  height: 30,
                },
              }}
            />
              
            // 클릭한 마커의 커스텀오버레이만 보이게끔 조건을 붙인다
            {info && info.content === marker.content && (
              <CustomOverlayMap
                position={{
                  lat: marker.position.lat,
                  lng: marker.position.lng,
                }}
                // 커스텀오버레이 위치 조정
                yAnchor={2.1}
              >
                <div className="customoverlay">
                  <span className="title">{marker.content}</span>
                </div>
              </CustomOverlayMap>
            )}
          </div>
        ))}
      </Map>
	<...>
)

map 검색 결과의 특정위치의 좌표를 MapMarker 컴포넌트를 이용해 전달해주면 된다.

커스텀오버레이가 필요하면 CustomOverlayMap 컴포넌트를 통해 마커와 같은 좌표를 전달해주고 xAnchor, yAnchor를 통해 위치 조정이 가능하다. 기본값은 0.5이고 0~1 사이의 값을 받는다고 나와있다. 생각보다 위치가 좀 차이나서 2.1까지 올렸는데 잘 된다. 이부분은 좀 더 알아보고 수정해야겠다. (kakao map 컴포넌트 전체코드도 같이 수정)