[React Native] 카카오 REST API를 이용한 위도 경도를 주소로 변환하기

오늘은 위도, 경도를 주소로 변환하는 방법에 대해서 작성해 보겠다.

나는 현재 위도 경도를 받아 아래 사진처럼 주소로 변환시켜야 했다.

 

처음에는 Google Maps Platform에서 Geocoding API를 이용하려 했다.. 하지만 GeoCoding API는 유료.. 

무료 API를 찾아보다가 이전 카카오 REST API를 사용하여 위치 검색을 구현했던 경험이 떠올라 공식문서를 찾아봤다.

역시나 godkao (감사합니다)

 

 

1. Kakao Developers 가입 후 REST_API_KEY 발급받기 

위 과정은 이전 KAKO REST API 주소 검색에서 작성했기에 넘어가겠다.

2.  코드 작성

const currentLocationGet = async () => {
  const url = `https://dapi.kakao.com/v2/local/geo/coord2address.json?x=경도&y=위도&input_coord=WGS84`;
  //x에 경도 입력
  //y에 위도 입력
  //input_coord에 x,y로 입력되는 값에 대한 좌표계 -> WGS84이 기본값 (이걸로 사용)
  const headers = {
    Authorization: `KakaoAK REST_API_KEY`,
    'Content-Type': 'application/json;charset=UTF-8',
  };

  try {
    const response = await fetch(url, {
      method: 'GET',
      headers: headers,
    });
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const res = await response.json();
    return res;
  } catch (error) {
    console.error('Error fetching res:', error);
  }
};

 

간단하다. 주소로 변환할 위도와 경도를 입력하고 카카오 API 키만 입력하면 된다.

 

3. 필요에 따라 데이터 사용

HTTP/1.1 200 OK
Content-Type: application/json;charset=UTF-8
{
  "meta": {
    "total_count": 1
  },
  "documents": [
    {
      //도로명 주소 
      "road_address": {
        "address_name": "경기도 안성시 죽산면 죽산초교길 69-4",
        "region_1depth_name": "경기",
        "region_2depth_name": "안성시",
        "region_3depth_name": "죽산면",
        "road_name": "죽산초교길",
        "underground_yn": "N",
        "main_building_no": "69",
        "sub_building_no": "4",
        "building_name": "무지개아파트",
        "zone_no": "17519"
      },
      //지번 주소
      "address": {
        "address_name": "경기 안성시 죽산면 죽산리 343-1",
        "region_1depth_name": "경기",
        "region_2depth_name": "안성시",
        "region_3depth_name": "죽산면 죽산리",
        "mountain_yn": "N",
        "main_address_no": "343",
        "sub_address_no": "1",
      }
    }
  ]
}

API 호출 시 응답은 위와 같은 구조로 온다.  나는 주소의 일부만이 필요했기 때문에 아래와 같이 사용했다. 

<MainWeatherLocation>
    {locationData.documents[0].road_address.region_1depth_name + ' ' + locationData.documents[0].road_address.region_2depth_name}
</MainWeatherLocation>

 

4. Response에 대한 자세한 설명

road_address

address_name	String	전체 도로명 주소
region_1depth_name	String	지역 1Depth, 시도 단위
region_2depth_name	String	지역 2Depth, 구 단위
region_3depth_name	String	지역 3Depth, 면 단위
road_name	String	도로명
underground_yn	String	지하 여부, Y 또는 N
main_building_no	String	건물 본번
sub_building_no	String	건물 부번, 없을 경우 빈 문자열("") 반환
building_name	String	건물 이름
zone_no	String	우편번호(5자리)

 

address

address_name	String	전체 지번 주소
region_1depth_name	String	지역 1Depth명, 시도 단위
region_2depth_name	String	지역 2Depth명, 구 단위
region_3depth_name	String	지역 3Depth명, 동 단위
mountain_yn	String	산 여부, Y 또는 N
main_address_no	String	지번 주 번지
sub_address_no	String	지번 부 번지, 없을 경우 빈 문자열("") 반환

 

자세한건 아래 링크를 참고!

https://developers.kakao.com/docs/latest/ko/local/dev-guide#coord-to-address

이상이다.