[React.js] Geolocation과 reverseGeocoding을 활용한 사용자 현재 위치 기반 좌표, 주소값 받아오기

해당 글은 코드에 대한 자세한 설명을 담는 포스팅이기보다는 나와 같은 기능을 만드는 주니어 개발자를 위한 포스팅임을 미리 알린다.

 

나는 현재 리액트 사이드 프로젝트로 사용자 현재 위치를 기반으로 하여 주위 모범 음식점을 알려주는 gis 기반의 사이드 프로젝트를 혼자 진행중이다

(https://github.com/Growing-Jiwoo/ModelRestaurant)

 

해당 프로젝트에서 기초 지반이 되는 기능이 바로 사용자가 접속한 위치의 위도 경도를 받아오고 해당 위도 경도로 주소값을 받아오는 기능이다.

 

해당 기능이 필요한 이유는 많고 많은 음식점 리스트 중에 사용자의 현재 위치를 기반으로 주위에 있는 음식점 리스트들만을 보여주게 하기위해서이다.

 

---

❗ 전체 코드

import { useState, useEffect } from 'react';
import axios from 'axios';

interface Coordinates {
  lat: number;
  lng: number;
  address: string;
}

interface Location {
  loaded: boolean;
  coordinates?: Coordinates;
  error?: {
    code: number;
    message: string;
  };
}

interface ResponseData {
  documents: {
    address: {
      region_1depth_name: string;
      region_2depth_name: string;
    };
  }[];
}

const mapAPI = async (latitude: number, longitude: number) => {
  try {
    const response = await axios.get<ResponseData>(
      `https://dapi.kakao.com/v2/local/geo/coord2address.json?input_coord=WGS84&x=${latitude}&y=${longitude}`,
      {
        headers: {
          Authorization: 'KakaoAK "키 값" ',
        },
      }
    );
    const location = response.data.documents[0];
    const { region_1depth_name: si, region_2depth_name: gu } = location.address;
    return `${si} ${gu}`;
  } catch (error: any) {
    console.log(error.message);
    return '';
  }
};

const useGeolocation = (): Location => {
  const [location, setLocation] = useState<Location>({
    loaded: false,
    coordinates: {
      lat: 0,
      lng: 0,
      address: 'Suyeong-gu, Busan',
    },
  });

  useEffect(() => {
    const onSuccess = async (position: GeolocationPosition) => {
      const { latitude, longitude } = position.coords;
      const address = await mapAPI(latitude, longitude);
      setLocation({
        loaded: true,
        coordinates: {
          lat: latitude,
          lng: longitude,
          address,
        },
      });
    };

    const onError = (error: GeolocationPositionError) => {
      setLocation({
        loaded: true,
        error: {
          code: error.code,
          message: error.message,
        },
      });
    };

    if (!navigator.geolocation) {
      onError({
        code: 0,
        message: 'Geolocation not supported',
        PERMISSION_DENIED: 0,
        POSITION_UNAVAILABLE: 0,
        TIMEOUT: 0,
      });
    } else {
      navigator.geolocation.getCurrentPosition(onSuccess, onError);
    }
  }, []);

  return location;
};

export default useGeolocation;

 

 

결과 (데이터 일부 가림)

 

그냥 간단하게 로직에 대해 설명하자면

naver map api에서 geolocation api를 사용하여 사용자의 현재 좌표(위도, 경도)값을 받아오고 

받아온 좌표 값을 kakao reverseGeocoding api에 위도 경도 값을 인자값으로 던져주어 

인자값으로 받은 위도 경도값에 대한 도로명 주소와, 번지 주소를 뱉게하는 로직이다.

( 해당 함수는 utils 디렉토리로 분류하여 필요한곳에서 import/export 하여 사용하는 중이다. )

 

내가 빈 화면에서 톡톡 쳐대면서 만든 코드는 아닐지라도 리액트 왕초보로써 머리를 쥐어짜내가며 

나름 열심히 조립을 한 코드이다.

 

누군가에게 작은 도움이 되었으면 하는 마음으로 블로그 포스팅을 하고 여기서 글을 끝마치겠다.