[ReactJS] 네이버, 카카오 지도 api 사용해 개발해보자 (1) - 지도 가져오기

API 연습을 위해 네이버 지도를 사용하려 했으나
React에서는 라이브러리를 사용해야한다는 이야기에
카카오로 넘어갔다.
하지만 정리는 둘 다 하는걸로!

---

네이버 API 지도를 사용해보자

1) Naver cloud 플랫폼 계정을 생성하고 회원가입 & 로그인.

결제정보를 입력해야만 서비스를 사용할 수 있습니다.
유료 서비스가 아니면 요금이 부과되지 않아요!

2) console로 들어가 Products & services 에 들어간다.
3) AI·NAVER API 항목을 클릭하여 어플리케이션을 등록한다.

4)Service 선택에서 원하는 map을 선택하고 등록하면 끝!

코드 상에 적용해보자

react에서 naver map api를 사용하기 쉽게 도와주는 라이브러리를 사용한다.

yarn add react-naver-maps

* 다큐먼트

https://zeakd.github.io/react-naver-maps/#/React%20Naver%20Maps

React Naver Maps Style Guide

---

카카오 API 지도를 사용해보자

api 사용하는 법은 아래의 다큐먼트에 자세히 소개되어 있다.

* 다큐먼트
https://apis.map.kakao.com/web/documentation/

코드 상에서 적용해보자

1) react가 랜더링 되는 index.html에 아래의 코드를 추가해 javascript api를 불러온다.
여기서 주의해야할 점은 kakao develops 상에서의 내 어플리케이션의 앱 key와
스크립트 상의 api key가 같아야한다는 점!

 <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=어플리케이션 앱 키"></script>

2) 지도를 그리기 위해 window 객체로부터 스크립트에서 불러온 kakao api를 가져온다.

 const { kakao } = window;

3) 지도를 그릴 컴포넌트 내에 map을 위치시키기 위한 공간을 생성한다.

<div id="map" style={{width:"500px", height:"400px"}}></div>

4) 렌더링 될 때 지도를 보여주기 위해 useEffect hook을 통해 미리 카카오 지도 객체를 만들어 준다.

마운트란
리액트에서 DOM 특정 영역에 component를 넣는 행위

useEffect(()=>{ var container = document.getElementById('map'); var options = { center: new kakao.maps.LatLng(37.365264512305174, 127.10676860117488), level: 3 }; var map = new kakao.maps.Map(container, options); }, [])

5) 위의 과정을 끝내고 웹을 실행하면 기본적인 지도를 볼 수 있다.