[React.js] react-leaflet Tooltip에 EventHandler 구현하기(interactive Option)
react-leaflet의 Marker는 기본적으로 Interactive Layer로 동작하여, 클릭하면 PopUp 메세지를 띄울 수 있다.
Tooltip은 보통 Marker를 설명하는 말풍선 느낌으로 사용하는데, Tooltip을 클릭할 시 다른 화면을 띄우고 싶었다.
React API를 참고하면 Tooltip에 아래와 같은 Option을 확인할 수 있다.
이 중 interactive의 값을 true로 하면 해당 컴포넌트를 Interactive Layer로 적용한다.
아래는 React API에 설명되어 있는 Interactive Layer에 대한 설명으로, Interactive Layer는 click이나 mouseover와 같은 마우스 이벤트를 다룰 수 있는 레이어이다. 사용할 수 있는 이벤트 종류는 사진을 참고한다.
react-leaflet Setting 하기
아래의 설치방법을 참고한다.
code 수정하기
사용방법은 아래와 같다.
먼저 Marker의 Event Handler에 아래와 같이 이벤트를 등록한다.
function Map() {
let tooltipClick = (message) => {
console.log(message);
}
return (
<MapContainer.. >
<TileLayer.. />
<Marker eventHandlers={{ click: tooltipClick.bind(this, 'TEST Message') }}>
</Marker>
</MapContainer>
)
}
Marker안에 사용할 Tooltip을 interactive Option을 사용하여 정의한다.
function Map() {
let tooltipClick = (message) => {
console.log(message);
}
return (
<MapContainer.. >
<TileLayer.. />
<Marker eventHandlers={{ click: tooltipClick.bind(this, 'TEST Message') }}>
<Tooltip direction="top" opacity={1} permanent interactive>
<span>Tooltip Massage</span>
</Tooltip>
</Marker>
</MapContainer>
)
}
위와 같은 Option을 사용하면 Tooltip은 Marker의 상단에(direction="top") 투명도 없이(opacity={1}) 상시 존재하는 형태로(permanent) Interactive Layer(interactive) 속성을 가진다.
에러 및 버그 발생
1. Tooltip에 eventHandler 등록 안되는 현상
위의 코드를 이용하면 Marker와 Tooltip을 클릭했을 때 모두 'tooltipClick' 이벤트를 동작하게 된다.
처음에는 Tooltip 태그 안에 eventHandlers를 정의해보았으나 그러면 Tooltip에 마우스 이벤트가 먹히지 않았다.. 이유는 모르겠다.
react-leaflet API를 살펴봐도 Props에 eventHandlers가 나와있지만, 동작은 안한다..(버그인가)
나는 Marker와 Tooltip 둘 다 같은 이벤트를 줘도 상관없어서 그대로 뒀다.
2. interactive Tooltip remove 시(unmount 시점) TypeError: Cannot read property '_targets' of null 발생
하루종일 버그잡다가 github issue에서 발견 :)
아직 해결안된 문제인 듯..
useEffect를 사용해서 UnMount 직전에 interactive Option을 false로 바꾸면 해결이 되려나..
일단은 개발 환경에서만 에러 페이지가 뜨니 그냥 무시하고 개발 진행했다.
아래의 github issue 참고