React-Kakao-Map Index 트러블슈팅

사실 별거 아닌 트러블 슈팅이지만 차후 참고사항으로 쓸 수 있을 것 같아서 작성해본다.. 

 

index로 계속 문제를 겪고 있었다. 

당연히 css로 해결해야하는 것 이라고 생각하고 다양한 방법으로 css를 주고 있었다. 

boolean 값으로도 해보고 아는 선에서 다 시도해 보았지만 index가 주어지지 않았다. 

 

 const [userDotKey, setUserDotKey] = useState(() => `userDot-${Date.now()}`);

결국 key값을 주고 강제로 렌더링을 할 수 있도록 해보았다. 

이렇게 강제로 렌더링을 시켜 `dom`에 그려지는 순서를 조작했지만 

 

문제는 동일한 닷 컴포넌트를 그리는 커스텀오버레이에서 

hover가 되었을때와 되지 않았을때를 나누는 <div/> 에서는 index를 줄 수 있는 방법이 없었다. 

 

카카오 공식문서를 찾아보았지만 나는 이해할 수 없었다. 

그렇게 찾고 찾다가 react-kakao-maps-sdk github를 살펴보았는데 바로 이해할 수 있었다.. 

 

그리고 1분만에 해결이 되었다. 

 

react-kakao-maps-sdk에서는  react에서 사용할 수 있는` <CustomOverlayMap/> ` 컴포넌트를 제공한다. 

그리고 아래에 값들을 props로 받을 수 있다.

   * 커스텀 오버레이의 좌표
  position: {
    lat: number
    lng: number
  }

   * true 로 설정하면 컨텐츠 영역을 클릭했을 경우 지도 이벤트를 막아준다.

  clickable?: boolean

  /**
   * 컨텐츠의 x축 위치. 0_1 사이의 값을 가진다. 기본값은 0.5
   */
  xAnchor?: number

  /**
   * 컨텐츠의 y축 위치. 0_1 사이의 값을 가진다. 기본값은 0.5
   */
  yAnchor?: number

  /**
   * 커스텀 오버레이의 z-index
   */
  zIndex?: number

  /**
   * 커스텀 오버레이를 생성 후 해당 객체를 가지고 callback 함수를 실행 시켜줌
   */
  onCreate?: (customOverlay: kakao.maps.CustomOverlay) => void
}

 

즉 react-kakao-maps-sdk에서 제공하는` <CustomOverlayMap/> ` 컴포넌트에 props로 index 값을 넘겨주면 해결 될 수 있었다.

 

 

< 기존 코드 >

 

              <CustomOverlayMap
                position={{
                  lat: marker.lat,
                  lng: marker.lng,
                }}
                xAnchor={0.5}
                yAnchor={0.5}
              >
                <div
                  onMouseOver={() => handleMouseOver(marker.id)}
                  onMouseOut={handleMouseOut}
                >
                  <Dot
                    level={marker.level}
                    id={marker.id}
                    hover={hoveredMarker === marker.id}
                  />
                </div>
              </CustomOverlayMap>

 

 

< 수정된 코드 >

              <CustomOverlayMap
                position={{
                  lat: marker.lat,
                  lng: marker.lng,
                }}
                xAnchor={0.5}
                yAnchor={0.5}
                zIndex={hoveredMarker === marker.id ? 20 : 1}
              >
                <div
                  onMouseOver={() => handleMouseOver(marker.id)}
                  onMouseOut={handleMouseOut}
                >
                  <Dot
                    level={marker.level}
                    id={marker.id}
                    hover={hoveredMarker === marker.id}
                  />
                </div>
              </CustomOverlayMap>

 

 

참고 문서

 

1. react-kakao-maps-sdk 깃허브

https://github.com/JaeSeoKim/react-kakao-maps-sdk/blob/485b580/packages/react-kakao-maps-sdk/src/components/CustomOverlayMap.tsx#L38

react-kakao-maps-sdk/packages/react-kakao-maps-sdk/src/components/CustomOverlayMap.tsx at 485b580b8b8e9b43a921d12b904b0860805704