JaeSeoKim / react-kakao-maps-sdk

React components for using kakao map api
https://react-kakao-maps-sdk.jaeseokim.dev
MIT License
275 stars 30 forks source link

'클릭한 위치에 마커 표시하기' undefined 타입 오류 #20

Closed restareaByWeezy closed 2 years ago

restareaByWeezy commented 2 years ago
function(){
  const Main = () => {
    const [position, setPosition] = useState()
    return (
      <>
        <Map // 지도를 표시할 Container
          center={{
            // 지도의 중심좌표
            lat: 33.450701,
            lng: 126.570667,
          }}
          style={{
            width: "100%",
            height: "450px",
          }}
          level={3} // 지도의 확대 레벨
          onClick={(_t, mouseEvent) => setPosition({
            lat: mouseEvent.latLng.getLat(),
            lng: mouseEvent.latLng.getLng(),
          })}
        >
          {position && <MapMarker position={position} />}
        </Map>
        {position && <p>{'클릭한 위치의 위도는 ' + position.lat + ' 이고, 경도는 ' + position.lng + ' 입니다'}</p>}
      </>
    )
  }
  return (<Main/>)
}

이렇게하면 lat: mouseEvent.latLng.getLat(), 이 구문에서 mouseEvent.latLng이 undefined일 수 있기때문에 ts오류가 발생합니다.

문서 예시에 if절 추가해서 타입 오류 피하는게 더 좋을 것 같아 글 남깁니다!

 onClick={(_t, mouseEvent) => {
          if (mouseEvent.latLng) {
            setPosition({
              lat: mouseEvent.latLng.getLat(),
              lng: mouseEvent.latLng.getLng(),
            })
          }
        }}
restareaByWeezy commented 2 years ago
image

latLng이 옵셔널입니다.

JaeSeoKim commented 2 years ago

답변이 늦어져서 죄송합니다.

공식문서에서 명시된 형태로는 옵셔널에 대한 설명이 없어서 보여서 실제 넘어오는 타입에 대해서 검증 후 수정해야 할 것 같습니다.

https://apis.map.kakao.com/web/documentation/#MouseEvent

타입정의 라이브러리의 경우 포크하여 추가 타입정의를 진행했던지라 기존에 작성된 타입에 대해서 맞는지 검증 후 샘플 문서를 수정하거나 타입정의가 틀린 경우 해야 재정의후 배포 하도록 하겠습니다. https://github.com/JaeSeoKim/kakao.maps.d.ts

혹 해당 부분에 대해서 기여 해주신가면 확인후 반여해드리겠습니다.

JaeSeoKim commented 2 years ago

type 정의가 잘못된 것으로 생각 되어 수정하여 최신버전으로 배포 하였습니다.