[React] 카카오 지도 API 가져오기

https://hyjang.tistory.com/entry/React-%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0-%ED%8F%AC%ED%84%B8-%EC%98%A4%ED%94%88-API-%ED%98%B8%EC%B6%9C%ED%95%98%EA%B8%B0Axios-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC

[React] 공공데이터 포털 오픈 API 호출하기(+Axios 라이브러리)

이전 게시물에서는 공공데이터 포털 사이트에서 자전거 사고 다발지역 오픈 API소스를 가져왔다.

이 데이터에서 가져온 위도, 경도 데이터를 사용하여 카카오 지도에 표시하기 위해 먼저 카카오 지도 API를 가져오는 방법을 알아보려 한다.

 

---

https://developers.kakao.com/

Kakao Developers

먼저 카카오 개발자 사이트에 로그인 후 내 애플리케이션에서 앱을 만든다.

이런식으로 앱을 만든 후 앱 설정으로 들어가 '앱 키' 페이지에 들어가면

네이티브 앱 키, REST API 키, JavaScript 키, Admin 키가 있는데 그 중 JavaScript 키로 카카오 지도를 가져올 수 있다.

 

---

https://apis.map.kakao.com/web/guide/#start

위 페이지에 들어가면 작성 코드가 나온다.

한번 순서대로 진행해보자. 

 

 

import { useEffect } from 'react';
import './App.css';
import useFetch from './hooks/useFetch';
 
function App() {
  const data = useFetch(`${process.env.REACT_APP_API_URL}?ServiceKey=${process.env.REACT_APP_API_KEY}&searchYearCd=2015&siDo=11&guGun=680&type=json&numOfRows=10&pageNo=1`);
  
  return (
    <div className="App">
      <div id="map" style={{width:'500px', height:'400px'}}></div>
    </div>
  );
}

export default App;

 

먼저 지도가 띄워질 div#map 태그를 추가한다.

 

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>

그리고 실제 지도를 그려주는 JavaScript API를 가져오는데, 발급받은 APP KEY는 방금 카카오 개발자 사이트에서 받은 JavaScript 키이다.

 

위 API 키는 실행되는 코드보다 앞에 있어야 하기 때문에 public 폴더에 있는 index.html에서 head태그 하단에 추가해준다.

 

이제 지도를 띄우는 코드를 작성할 것이다.

카카오 사이트에 있는 코드는 아래와 같다.

var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
	center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
	level: 3 //지도의 레벨(확대, 축소 정도)
};

var map = new kakao.ma

리액트에서는 이 코드를 useEffect를 사용하여 마운트 시점에 불러오도록 한다.

 

최종 코드

import { useEffect } from 'react';
import './App.css';
import useFetch from './hooks/useFetch';
const { kakao } = window;
function App() {
  const data = useFetch(`${process.env.REACT_APP_API_URL}?ServiceKey=${process.env.REACT_APP_API_KEY}&searchYearCd=2015&siDo=11&guGun=680&type=json&numOfRows=10&pageNo=1`);

  useEffect(()=>{
    const container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
    const options = { //지도를 생성할 때 필요한 기본 옵션
      center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
      level: 3 //지도의 레벨(확대, 축소 정도)
    };
    new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
  },[])

  return (
    <div className="App">
      <div id="map" style={{width:'500px', height:'400px'}}></div>
    </div>
  );
}

export default App;

 

주의사항

여기서 카카오 객체를 따로 빼주지않으면 위 처럼 오류가 나오는데, 이 부분은 함수형 컴포넌트 외부에 const { kakao } = window 를 작성해주면 된다. 

 

참고:https://velog.io/@tpgus758/React%EC%97%90%EC%84%9C-Kakao-map-API-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0