[React Native] RN - 카카오 로컬 API 사용하기(좌표를 주소로)

안녕하세요.

 

이번 시간에는 카카오 로컬 API를 활용하여 좌표를 주소로 변경하는 작업을 해보도록 하겠습니다.

Installing

npm 또는 yarn을 통하여 axios를 설치하여 줍니다.

npm install axios --save

또는

yarn add axios

axios 데이터 불러오기

 카카오 개발자 사이트에 접속

① 내 어플리케이션 > 앱 설정 > 앱키로 접속해 줍니다.

② REST API 키를 복사합니다.

③ 복사한 REST API 키를 React Native 코드에 넣어 줍니다.

결과 확인하기

 

전체 코드

import React, {useState} from 'react';
import {Text, View, Button} from 'react-native';
import axios from 'axios';

export default function App() {
  const [locationObj, setLocationObj] = useState({});

  const x = '126.9539484';
  const y = '37.3097165';

  const _callApi = async () => {
    try {
      let res = await axios
        .get(
          `https://dapi.kakao.com/v2/local/geo/coord2address.json?input_coord=WGS84&x=${x}&y=${y}`,
          {
            headers: {
              Authorization: 'KakaoAK 1234567891234567891234567891234',  // REST API 키
            },
          },
        )
        .then(res => {
          const location = res.data.documents[0];
          setLocationObj({
            si: location.address.region_1depth_name,
            gu: location.address.region_2depth_name,
            dong: location.address.region_3depth_name,
            // locationX: location.address.x,
            // locationY: location.address.y,
          });
        });
      console.log(locationObj);
    } catch (error) {
      console.log(error.message);
    }
  };

  return (
    <View>
      <Button title="Api 불러오기 버튼" onPress={_callApi} />
      <Text>{locationObj.si}</Text>
      <Text>{locationObj.gu}</Text>
      <Text>{locationObj.dong}</Text>
    </View>
  );
}

 

수고하셨습니다.

 

 

[React Native] RN - 현재 위치 좌표 불러오기