[React] 카카오지도 API(SDK)를 이용한 주소에 해당하는 마커 표시 구현

아래 사진과 같이 react-kakao-maps-dsk를 이용해 지도를 구현하고 주소에 해당하는 부분(충청북도 단양군 단양읍 고수동굴길 8)에 마커 표시를 구현할 것이다.

1. 카카오 개발자 어플 등록

https://developers.kakao.com/

Kakao Developers

위 링크로 들어가 로그인을 한 후, 내 어플리케이션으로 이동해 어플리케이션을 추가해준다.

등록 후, 아래과 같이 플랫폼으로 이동해 Web에 http://localhost:3000을 추가해준다.

앱 키로 이동해 JavaScript 키를 복사해준다.

---

2. react에 카카오 Map설치

프로젝트로 이동해 public에 있는 index.html에서 script부분에 아래와 같이 발급받은 javascript 앱 키를 추가해준다.

여기서 주의할 점은 반드시 libraries=services를 추가해줘야 한다.

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=앱 키&libraries=services"></script>

그리고 터미널에 아래 명령어를 입력해 sdk를 설치해준다.

npm install react-kakao-maps-sdk

---

3. 지도 불러오기 + 주소에 해당하는 마커 표시하기

먼저 코드에 대한 설명을 하자면, DetailMap은 다른 컴포넌트에서 address라는 값을 전달 받아 그 주소에 해당하는 위치에 마커를 표시한다. 

  const [state, setState] = useState({
    // 지도의 초기 위치
    center: { lat: null, lng: null },
    // 지도 위치 변경시 panto를 이용할지(부드럽게 이동)
    isPanto: true,
  });

state는 마커를 표시할 좌표값을 저장하는 변수이다. 그 안에는 center라는 위도, 경도 값을 저장하는 값과, isPanto라는 지도 변경시 어떻게 이동하는지를 결정하는 값이 있다.

const [searchAddress, SetSearchAddress] = useState(address);

searchAddress는 주소이다. 다른 컴포넌트에서 전달 받은 address값을 searchAddress에 저장한다. 테스트를 할 때 useState(" 충청북도 단양군 단양읍 고수동굴길 8 ") 이런 식으로 주소값을 주어 마커가 잘 찍히는지 테스트해보면 된다.

const geocoder = new kakao.maps.services.Geocoder();

주소를 좌표로 변환해주는 함수이다. 정확히는 services 라이브러리를 사용하는 것이다. Geocoder는 주소를 좌표로 변환하거나, 좌표를 주소로 변환하는 기능을 제공하는 객체이다.

// 주소를 좌표로 변환하여 state에 저장
    let callback = function(result, status) {
      if (status === kakao.maps.services.Status.OK) {
        const newSearch = result[0]
        setState({
          center: { lat: newSearch.y, lng: newSearch.x }
        })
      }
    };
      geocoder.addressSearch(`${searchAddress}`, callback);

callback함수는 주소를 좌표로 변환한 결과(result)와 변환이 성공했는지를 나타내는 상태(status)를 인수로 받는 함수이다.

result매개변수는 변환된 좌표 정보를 담고 있는 배열 변수이다. 변환된 주소가 여러 개일 수 있기 때문에 배열로 반환한다. 참고하자면 여러 개 일 때는 키워드로 지도에 여러 개의 마커를 표시할 때 사용한다. 

나는 주소에서 한 개의 마커만 표시하므로 첫 번째로 반환된 값인 result[0]만 newSearch에 저장하여 마커를 표시하는 좌표를 저장하는 state의 center값에 위도, 경도 값을 저장해준다.

<KakaoMap
        center={state.center}
        isPanto={state.isPanto}
        style={{
          width: "100%",
          height: "200px",
        }}
        level={2}
      >

카카오 지도를 표시한다. 중심좌표 값인 center를 반환된 위도, 경도 값으로 지정해주고, isPanto값도 저장해준다. level은 확대된 정도로 숫자가 작을 수록 많이 확대된 지도가 출력된다.

<MapMarker position={state.center}/>

지도에 중심위치에 해당하는 마커를 표시한다.

전체 코드는 다음과 같다.

import { useEffect, useMemo, useState } from "react";
import { Map as KakaoMap, MapMarker } from "react-kakao-maps-sdk";
import { useNavigate } from 'react-router-dom';

const {kakao} = window;
function DetailMap({ address }) {

  const [state, setState] = useState({
    // 지도의 초기 위치
    center: { lat: null, lng: null },
    // 지도 위치 변경시 panto를 이용할지(부드럽게 이동)
    isPanto: true,
  });
  
  // 주소 변수
  const [searchAddress, SetSearchAddress] = useState(address);
  
  // 주소에 해당하는 마커 표시
  useEffect(() => {
    // 주소를 좌표로 변환한는 함수
    const geocoder = new kakao.maps.services.Geocoder();
    
    // 주소를 좌표로 변환하여 state에 저장
    let callback = function(result, status) {
      if (status === kakao.maps.services.Status.OK) {
        const newSearch = result[0]
        setState({
          center: { lat: newSearch.y, lng: newSearch.x }
        })
      }
    };
      geocoder.addressSearch(`${searchAddress}`, callback);
    }, [])
  
  return (
    <div>
      <KakaoMap
        center={state.center}
        isPanto={state.isPanto}
        style={{
          width: "100%",
          height: "200px",
        }}
        level={2}
      >
        {!state.isLoading && (
          <MapMarker position={state.center}/>
        )}
      </KakaoMap>
    </div>
  )
}

export default DetailMap;

---

참고

https://react-kakao-maps-sdk.jaeseokim.dev/docs/sample/overlay/geolocationMarker/

geolocation으로 마커 표시하기 | react-kakao-maps-sdk docs

https://velog.io/@support/React-%EC%B9%B4%EC%B9%B4%EC%98%A4-%EC%A7%80%EB%8F%84-API-%EC%A3%BC%EC%86%8C-%EA%B2%80%EC%83%89

React / 카카오 지도 API - 주소 검색