React native에서 위치 정보를 가져와서 react webview 로 정보를 보낸다. 해당 위치 정보를 react 에서는 카카오 맵 api를 활용해서 주변 충전소의 위치를 보여주고 선택하게 한 뒤 해당 충전소로 갈 수 있도록 한다. 충전소의 이름을 사용자가 검색 가능하며 타입별로 구분하여 충전소 말고도 대리점의 선택도 가능해야한다.
- react native 에서 react webview로 위치 정보를 보내기
웹에서도 geolofication을 가져올 수 있다. 하지만 이는 Coarse location으로 IP 기반으로 위치를 알려주기 때문에 GPS를 기반으로 가져오는 정보엔 Fine location 에 비해 정확하지 않다. 그래서 react native 앱에서 정보를 가져와야한다. react-native 에서 webview의 loadend API에 post message를 활용해서 위도 경도를 보내면 된다.
webview에서는 이 정보를 이벤트 리스너를 활용해서 가져오면된다.
useEffect(() => {
document.addEventListener(“message”, evt);
return () => {
document.removeEventListener(“message”, evt);
}
}, []);
이런 식이다. 그런데 문제가 있었다. 이상하게도 리프레시를 할때에만 message를 가져올수 있는 것이었다. 내가 원하는 페이지에선 바로 가져와지지 않는 것이었다. 이 문제는 내가 사용하고 있는 것이 React 이며 SPA이기 때문에 발생한 것이었다.
SPA의 경우엔 html의 전체적인 load는 처음에 진행 되고 그 이후에는 필요한 부분만 가져와서 랜더링 한다. 그러니까 웹뷰의 경우엔 앱이 실행됬을 때 서버에서 html 이 load 되는 것이다. 이렇게 되면 내가 원하는 페이지로 라우팅 됬을때는 load가 일어나지 않는다. react의 웹뷰의 loadended는 로드가 끝난 뒤에 한 번 불려진다. 이 때문에 내가 원하는 페이지에서는 아무리 이벤트 리스너로 앱에서 정보를 불러보려 해봐야 소용이 없었다.
그래서 리프레시했을 때만 정보를 가져올수 있던 것이었다. 이에 대한 해결책은 라우팅 초기에 이벤트 리스너 함수를 설정하고 받아온 정보를 글로벌로 변수를 저장하는 것이었다. Latitude, longtitude를 글로벌로 저장했다.
이 글로벌 변수를 내가 원하는 페이지에서 불러왔더니 정보가 가져와졌다. 이 정보를 바탕으로 내 위치를 카카오 맵에 올리고 마커를 진행하면된다. 이에 관련해서는 다음 포스트에 올리도록 하겠다.