React / typescript 카카오 지도 api 사용

https://developers.kakao.com/

Kakao Developers

 

 

1. 위 사이트에서 시작하기 → 카카오 로그인 → 애플리케이션 추가하기 → 앱 이름 / 사업자 명은 적고 싶은데로 적어준다.

 

2. 만든 내 애플리케이션에서 위 사진처럼 앱 키를 볼 수 있다.

- 해당 키는 본인만 알고 있어야한다.

- Git에 올려야되는 경우라면 해당 키를 변수명으로 만들어서 사용하고 키는 .gitignore로 git에 올라가지 않게 해주자 

 

3. 만든 react 프로젝트에서 public → index.html에서 head칸 안에

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 사용하세요"></script>

코드를 넣어준 후 appkey= 뒤에 있는 한글은 지우고 위에서 받은 JavaScript 키를 넣어준다.

 

 

4. 코드 작성

App.tsx에서 바로 적어줘도 되나 난 따로 파일을 만들었다.

 

타입스크립트에선 함수 컴포넌트 내부에 kakao를 인식을 못해서 컴포넌트 외부에서 kakao 변수를 만들고 window에 있는 kakao를 가져와야 된다고 하더라 

import React, { useEffect } from 'react'

const kakao = (window as any).kakao;

export default function KakaoMap() {
  
  useEffect(() => {
    const container = document.getElementById('map'); //? 지도를 담을 영역의 DOM 레퍼런스
    const options = {
        center : new kakao.maps.LatLng(35.153513,129.059220), //? 지도의 중심좌표.
        level : 3 //? 지도의 확대 레벨
    };

    const map = new kakao.maps.Map(container, options); //? 지도 생성 및 객체 리턴
   },[])

    return (
    <div id = "map" style={{ //? 지도화면 담을 공간
        width : '1700px',
        height : '900px'
    }}>KakaoMap</div>
  )
}

 

 

변수 대신 interface 사용

  declare global{ //? 전역 변수로 선언, 사용 시 kakao 앞에 window 붙이기
   interface Window{
     kakao : any;
   }
 }

export default function KakaoMap() {
  
  useEffect(() => {
    const container = document.getElementById('map'); //? 지도를 담을 영역의 DOM 레퍼런스
    const options = {
        center : new window.kakao.maps.LatLng(35.153513,129.059220), //? 지도의 중심좌표.
        level : 3 //? 지도의 확대 레벨
    };

    const map = new window.kakao.maps.Map(container, options); //? 지도 생성 및 객체 리턴

   },[])

    return (
    <div id = "map" style={{ //? 지도화면 담을 공간
        width : '1700px',
        height : '900px'
    }}>KakaoMap</div>
  )
}

 

App.tsx에서 호출해서 npm run start 실행시켜주면

 

이렇게 나온다.

 

마커는 따로 코드 추가해주었다.

import React, { useEffect } from 'react'

const kakao = (window as any).kakao;

export default function KakaoMap() {
  
  useEffect(() => {
    const container = document.getElementById('map'); //? 지도를 담을 영역의 DOM 레퍼런스
    const options = {
        center : new kakao.maps.LatLng(35.153513,129.059220), //? 지도의 중심좌표.
        level : 3 //? 지도의 확대 레벨
    };

    const map = new kakao.maps.Map(container, options); //? 지도 생성 및 객체 리턴
    
    const markerPosition = new kakao.maps.LatLng(35.153513,129.059220); //? 마커 표시 위치 

    const marker = new kakao.maps.Marker({ position : markerPosition}); //? 마커 생성

    marker.setMap(map);
   },[])

    return (
    <div id = "map" style={{ //? 지도화면 담을 공간
        width : '1700px',
        height : '900px'
    }}>KakaoMap</div>
  )
}

 

 

https://apis.map.kakao.com/