오늘 해야 할 일

• 카카오맵 WEB용 라이브러리와 리액트용 SDK 비교하기

오늘 배운 것

• 카카오맵 리액트용 SDK 패키지 적용
• 리액트용 SDK와 웹용 라이브러리의 코드 길이는 별로 차이가 없다. 오히려 리액트용은 마커의 속성에 대해 알려진게 없어서 리액트용보다 이전에 나왔던 웹용 라이브러리의 마커 속성이 레퍼런스가 많아서 더 쓰기에 편한 것 같다.(내가 못 찾는것일 수도 있다.)

오늘의 코드

카카오맵 리액트용 SDK에서 키워드로 장소검색하기와 클릭한 위치에 마커 표시하기를 같이 사용하는 코드를 짜봤다. 표시한 마커에 정보가 나오게 하려면 MapMarker에 추가해주면 될 것 같다.

function(){
  const [info, setInfo] = useState()
  const [markers, setMarkers] = useState([])
  const [map, setMap] = useState()
  const [aaa,  setAaa] = useState()

  useEffect(() => {
    if (!map) return
    const ps = new kakao.maps.services.Places()

    ps.keywordSearch("이태원 맛집", (data, status, _pagination) => {
      if (status === kakao.maps.services.Status.OK) {
        // 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
        // LatLngBounds 객체에 좌표를 추가합니다
        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)
      }
    })
  }, [map])

  return (
    <Map // 로드뷰를 표시할 Container
      center={{
        lat: 37.566826,
        lng: 126.9786567,
      }}
      style={{
        width: "100%",
        height: "350px",
      }}
      level={3}
      onCreate={setMap}
      
        onClick={(_t, mouseEvent) => setAaa({
            lat: mouseEvent.latLng.getLat(),
            lng: mouseEvent.latLng.getLng(),
          })}
    >
    
    
      {markers.map((marker) => (
        <MapMarker
          key={`marker-${marker.content}-${marker.position.lat},${marker.position.lng}`}
          position={marker.position}
          onClick={() => setInfo(marker)}
        >
          {info &&info.content === marker.content && (
            <div style={{color:"#000"}}>{marker.content}</div>
          )}
        </MapMarker>
      
      ))}
         {aaa && <MapMarker position={aaa} />}
    </Map>
  )
}

마무리

카카오맵 웹용 라이브러리로 프로젝트의 기능을 구현했다가 리액트용 SDK가 더 간편할 것 같아 적용해 봤지만 마커의 인포윈도우에 띄울 정보를 가져오려면 어떤 속성이 써야 하는지, 속성이 있긴 한건지 시간을 써서 찾아봐야했지만 그리하지 않았다. 왜냐하면 속성을 추가하고 상태로 만들면 어차피 웹용 라이브러리와 코드량이 비슷할 것 같기 때문이다. 그리하여 그냥 그대로 가기로 하고 테스트코드나 더 구현해 봐야 할 것 같다.