[기업협업]Day1. NaverMap

Naver Map은 React를 따로 지원하지 않는다.

네이버 지도 API v3

위의 링크에 접속하면 자바스크립트로 네이버 지도를 사용하는 방법이 나온다.

네이버 애플리케이션 클라우드 플랫폼

위의 링크에서 지도 API를 사용할 수 있도록 등록을 할 수 있다.

---

⛳ React로 프로젝트를 진행하기 위해서는...?

react-naver-map

react-naver-map

react-naver-maps

react-naver-maps

두 가지의 라이브러리를 사용할 수 있다. 하지만 마지막 업데이트가 2019년이기 때문에 정보가 많지 않으며 유지보수가 되어있지 않다는 단점이 있다.

그래도 감사히 사용해야 하는 입장.....

---

⛳ 자바스크립트 참고하며 React 컴포넌트 만들기

👉 Naver Map Javascript v3에서 제공하는 자바스크립트로 Map 이용하는 방법

var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.3595704, 127.105399),
    zoom: 15
});

👉 Naver Map Javascript v3에서 제공하는 자바스크립트로 Map 코드를 라이브러리를 통해 React에서 사용하는 방법

import {
  RenderAfterNavermapsLoaded,
  NaverMap,
} from 'react-naver-maps';
import './Map.scss';

const Map = () => {
  return (
    <RenderAfterNavermapsLoaded
      ncpClientId="네이버 클라우드 플랫폼에서 제공한 client key"
      error={<p>Maps Load Error</p>}
      loading={<p>Maps Loading...</p>}
    >
      <NaverMapAPI />
    </RenderAfterNavermapsLoaded>
  );
};


const NaverMapAPI = () => {

  return (
   <>
    <NaverMap
      id="react-naver-maps-introduction"
      style={{ width: '100%', height: '90vh'}}
      defaultCenter={{ lat: 37.497175, lng: 127.027926 }}
      //초기 화면 지도의 중앙 좌표
      defaultZoom={13}
	  //축소, 확대 기준
    >
    </NaverMap>
   </>

<NaverMap>의 다양한 속성은 위에 명시한 Naver Map Javascript v3 페이지에서 확인할 수 있다.

---

⛳ Long Story Short

Naver 지도... 쉽지 않은 도전과제이다. Kakao map은 어느정도 할 수 있겠다 생각했으며 Google Map 또한 사용하기 까다롭고 어렵지만 많은 자료가 있어 검색을 통해 충분히 진행할 수 있다. 하지만 네이버 맵... 리액트에 적용하는 정보가 많지도 않고 공식 문서에 react에 대한 내용은 아예 없다. "react에서 naver map 사용하기" 등반을 해보자.