[React] 카카오 지도 API 연동하기 (TS + Vite)

내가 원하는 지역의 지도를 화면에 표현해주고 싶어 React를 사용해 카카오 API를 연동해 보도록 하겠다.

 

1. kakaoDeveloper 사용하기

먼저 아래의 사이트에 접속하여 로그인이 필요하다.

https://developers.kakao.com/

Kakao Developers

1-1. 프로젝트 생성 및 플랫폼 등록

로그인을 한 후 내 애플리케이션에 들어가 프로젝트를 하나 생성 해 준다.

 

나는 toy-pj라고 미리 생성해두었다. 그런 다음 왼쪽 메뉴에서 플랫폼에 들어가 Web 부분의 플랫폼을 등록해 주면 된다. 여기서 웹플랫폼에 정확한 사이트 도메인을 입력해주어야 한다. 나는 아래처럼 테스트를 위해서 localhost로 입력해 주었다.

 

플랫폼을 등록하는 이유는 api키만 있다고 해서 동작이 되는 것이 아니라 저 도메인 명과 api키가 둘다 일치해야지 실행이 된다. api키가 노출되어도 다른 사람이 사용하는 것을 막기 위한 2차적 수단인 것 같다...

(물론 여기서는 테스트를 위해 localhost라고 했지만 실제로는 저렇게 하면 안된다...)

1-3 앱 키 복사

그리고 앱 키 메뉴로 들어가서 javascript 키를 복사해 둔다.

2. React에서 연동하기

kakaoDeveloper에서 할 작업은 마무리하였다. 다음으로 React에서 어떻게 하면 되는지 설명하겠다.

 

2-1. 라이브러리 설치하기

npm i react-kakao-maps-sdk

 

먼저 터미널에서 위의 코드를 입력하여 라이브러리를 설치해 준다.

 

2-2. 기본 설정하기

그런 다음 tsconfig.json 파일에서 compilerOptions를 추가하고 types 속성을 추가한 다음 kakao.maps.d.ts 패키지를 추가한다.

{...,
  "compilerOptions": {
    "types": ["kakao.maps.d.ts"]
  },
  ...
}

 

그런 다음 환경변수 파일을 하나 생성해 준다. 프로젝트 폴더 내. env라는 파일을 하나 만들고 아까 복사해 두었던 앱 키를 넣어 준다.

 

여기서 주의할 점은 vite에서 환경변수를 사용하기 위해서는 변수명 앞에 VITE_변수명 이런 식으로 VITE를 무조건 붙여야지 적용이 된다.(계속 안되어서 허튼짓을 하다가 공식문서를 보니 해결하였다...)

이제 마지막으로 index.html파일에 들어가 script를 하나 넣어주면 되는데 body 부분에 아래의 코드를 입력해 준다.

 

<script
  type="text/javascript"
  src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%VITE_KAKAOMAP_APP_KEY%&libraries=services,clusterer"
></script>

 

환경변수를 사용하기 위해서는 % 환경변수명% 이렇게 넣어주면 된다.

 

2-3. 화면 생성하기

이제 설정은 완료되었다. 본격적으로 화면에 구현해 볼 건데 먼저 src 폴더에 Maps라는 폴더를 생성하고 그 안에 Maps.tsx 파일을 하나 생성해 준다.

 

Maps.tsx에서 우리는 좌표를 서울역으로 지정하여 지도를 표시해 보도록 하겠다.

아래의 사이트에 들어가면 좌표를 알아낼 수 있다. 지도를 클릭하면 아래의 위도와 경도가 나온다 해당 부분을 복사해 둔다.

https://apis.map.kakao.com/web/sample/addMapClickEventWithMarker/

 

그런 다음 Maps.tsx에서 아래의 코드를 입력하고...

 

※ 처음에 화면이 안 나와서 뭐지 했는데 index.css에 들어가 전부 지우고 body태그의 스타일에 position을 relative로 주니까 나온다...

# Maps.tsx

import { Map, MapMarker } from "react-kakao-maps-sdk";

const Maps = () => {

    const s_lat = 37.55465000468857;
    const s_lng = 126.97059787494679;

    return (
        <>
          <Map
            center={{ lat: s_lat, lng: s_lng }}
            style={{ width: "100%", height: "360px"}}
          >
            <MapMarker position={{ lat: s_lat, lng: s_lng }}>
            </MapMarker>
          </Map>
        </>
      );
};

export default Maps;

 

App.tsx에서 Maps 컴포넌트를 불러와 실행해 보면

#App.tsx

import Maps from './Maps/Maps.tsx'


function App() {

  return (
    <>
      <Maps/>
    </>
  )
}


export default App

 

간단하게 지도를 그려보았다. 다양한 기능은 공식 문서에서 확인할 수 있다.

 

https://react-kakao-maps-sdk.jaeseokim.dev/

Hello from react-kakao-maps-sdk docs | react-kakao-maps-sdk docs