리액트 네이티브(React Native, RN)에서 카카오맵(Kakao 지도) API 사용하는 방법

Dependencies version

• react-native-webview@8.1.2
• react-native@0.61.4
• expo@~36.0.0

리액트 네이티브(React Native, RN)에서 카카오지도를 사용하는 방법은 웹뷰(Webview)를 활용하면 아주 간단하게 구현할 수 있습니다. 우선 react-native-webview 모듈을 사용해서 WebView 컴포넌트를 추가합니다. 저는 Location의 이름을 가진 stateful component를 생성하겠습니다.

// react native screen view
import { WebView } from "react-native-webview";

export default class Location extends Component {
  ...
  render() {
    return (
      <WebView
        source={{ uri: "http://webview-domain/app/map" }}
      />
    );
  }
}

웹뷰를 로컬에서 테스트하기 위해서는 웹뷰 localhost를 조금 다른 방식으로 접근해야합니다. Expo에서 localhost webview 사용하는 방법은 여기를 참고하셔서 세팅해주세요. 저는 웹뷰 프로젝트를 Nuxt로 세팅하겠습니다.

npx 명령어를 사용해서 nuxt 프로젝트를 설치합니다.

npx create-nuxt-app test-webview

사용하기 편하신 웹뷰로 프로젝트를 설정해주시면 됩니다. 만약 vue-cli를 통해 SPA 프로젝트를 구성하고 싶다면 vue-cli를 활용해서 프로젝트를 설치하시면 되고, CRA를 활용해서 리액트 프로젝트를 설치하고 싶으시다면 CRA로 리액트를 설치해주세요. 핵심은 우리가 웹뷰 개발서버를 실행할 때 단순 localhost가 아닌 조금 다른 방식으로 구성해야된다는 사실만 알고 계시면 됩니다. npm script에서 개발버전을 실행할 때 HOST=0.0.0.0 구문을 넣어줍니다.

// package.json
{
   "scripts": {
      "dev": "HOST=0.0.0.0 nuxt", // npm script에서 개발버전을 실행할 때 HOST=0.0.0.0 구문을 넣어줍니다.
	  ...
    },
}

HOST=0.0.0.0 구문과 함께 실행하면 개발서버는 현재 네트워크 ip와 동일한 주소로 열립니다. 이 주소를 기억하고 계세요!

그럼 이제 카카오맵 SDK를 웹뷰 프로젝트에 넣을 차례입니다. 카카오맵을 세팅하기 위해서는 여기를 참고해주세요. 카카오맵 API KEY를 부여받고, 카카오지도 SDK를 웹뷰 프로젝트에 넣었다면 아래와 같이 정상적으로 카카오맵이 웹뷰에 노출될 것입니다. 저는 http://192.168.80.237:3000/app/map로 개발서버가 세팅했습니다.

필자는 http://192.168.80.237:3000/app/map로 카카오맵을 세팅한 예시

// nuxt 코드 예시
<template>
  <div ref="map" style="width:100vw;height:100vh;"></div>
</template>

<script>
export default {
  head() {
    return {
      script: [
        {
          src: `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.KAKAO_APP_KEY}&libraries=clusterer`,
        },
      ],
    };
  },
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.load();
    });
  },
  methods: {
    load() {
      const container = this.$refs["map"];

      const options = {
        center: new kakao.maps.LatLng(36.176134, 127.986741),
        level: 3,
      };
      this.map = new kakao.maps.Map(container, options);
      // console.log(new kakao.maps.Map)
    },
  },
};
</script>

<style>
</style>

리액트 네이티브 웹뷰의 uri를 좀전에 저희가 세팅한 http://192.168.80.237:3000/app/map로 구성합니다.

중요한 포인트는 리액트 네이티브를 구동하고 있는 핸드폰도 개발서버를 구성한 네트워크와 동일하게 구성해야된다는 점입니다. 그래야 해당 네트워크 ip로 접근이 가능합니다.

// react native screen view 카카오맵 예시
import { WebView } from "react-native-webview";

export default class Location extends Component {
  ...
  render() {
    return (
      <WebView
        source={{ uri: "http://192.168.80.237:3000/app/map" }} // 예시
      />
    );
  }
}

Expo 리액트네이티브 개발환경에서 정상적으로 카카오지도가 출력된 모습

리액트 네이티브에서 웹뷰가 아닌 네이티브에서 카카오지도를 구현하기 위해서는 웹뷰를 활용하는 것 보다 훨씬 까다롭습니다. 이렇게 웹뷰로 카카오맵을 구성하고 지도를 움직이거나 마커를 구성할 때 적절하게 앱과 웹뷰 사이에 커뮤니케이션을 시켜주면 마치 앱에서 지도를 구현한 것 처럼 좋은 퍼포먼스를 낼 수 있을 것이라고 기대하고 있습니다.

이번 포스팅에서는 리액트 네이티브에서 카카오맵을 출력하기 위한 방법에 대해서 다뤄봤고, 다음 포스팅에서는 리액트 네이티브에서 앱과 카카오맵이 설정된 웹뷰 사이에서 적절하게 인터페이스를 구성하고 커뮤니케이션하는 방법에 대해서 다뤄보도록 하겠습니다.