React에 네이버 지도 및 마커 표시하기

React에서 네이버 지도를 표시하는 컴포넌트를 사용하는 법에 대해서 알아볼 것이다.

사전 작업

Node.js 설치

네이버 클라우드 플랫폼 등록

1. 이곳에 접속해서 네이버 클라우드 플랫폼 계정을 생성하고 로그인한다.
   https://www.ncloud.com/

2. 그리고 이곳에 접속해서 이용 신청하기를 누르면 네이버 클라우드 플랫폼 콘솔로 이동할 수 있다.
   https://www.ncloud.com/product/applicationService/maps

3. + Application 등록 버튼을 누르고, Application 이름, Service 선택으로 Maps를 전부 등록하고, 아래 Web 서비스 URL에 http://localhost:3000/을 등록한다. Web 서비스 URL은 실행하는 환경에 따라 달라질 수 있다. 이 부분이 정확하지 않으면 네이버 지도 Open API 인증이 실패했습니다. 라는 오류가 발생한다.

React Naver Maps 패키지 설치

> yarn add react-naver-maps

React 방식으로 네이버 지도를 사용할 수 있게, 네이버 지도를 불러오는 컴포넌트를 제공하는 패키지를 설치한다.

네이버 지도 표시하기

App.js 수정

간단하게 보여주기 위해 create-react-app으로 만들어진 프로젝트의 App.js 부분만 수정해서, 실행했을 때 화면에 React 마크가 돌아가는 거 대신에 네이버지도를 표시할 것이다.

// src/App.js

import React from 'react';
...
import { RenderAfterNavermapsLoaded, NaverMap } from 'react-naver-maps'; // 패키지 불러오기

function NaverMapAPI() {
  return (
    <NaverMap
      mapDivId={'maps-getting-started-uncontrolled'} // default: react-naver-map
      style={{
        width: '100%', // 네이버지도 가로 길이
        height: '85vh' // 네이버지도 세로 길이
      }}
      defaultCenter={{ lat: 37.554722, lng: 126.970833 }} // 지도 초기 위치
      defaultZoom={13} // 지도 초기 확대 배율
    />
  );
}

function App() {
  return (
    <RenderAfterNavermapsLoaded
      ncpClientId={'YOUR_NCP_CLIENT_ID'} // 자신의 네이버 계정에서 발급받은 Client ID
      error={<p>Maps Load Error</p>}
      loading={<p>Maps Loading...</p>}
    >
      <NaverMapAPI />
    </RenderAfterNavermapsLoaded>
  );
}

export default App;

react-naver-maps 패키지에서 네이버지도를 화면에 띄우기 위해 필요한 컴포넌트 2개를 불러오고, <NaverMap>으로 네이버지도를 불러와서 <RenderAfterNavermapsLoaded>로 감싸주면 된다. 이 컴포넌트의 props 중 ncpClientId만 자신의 네이버 클라우드 플랫폼 계정에서 발급받은 Client ID로 바꿔주면 네이버 지도가 표시된다.

지도에 마커 표시하기

App.js 수정

// src/App.js
...
import { RenderAfterNavermapsLoaded, NaverMap, Marker } from 'react-naver-maps'; // Marker 추가

function NaverMapAPI() {
  const navermaps = window.naver.maps;
  
  return (
    <NaverMap ...>
      <Marker
        key={1}
        position={new navermaps.LatLng(37.551229, 126.988205)}
        animation={2}
        onClick={() => {alert('여기는 N서울타워입니다.');}}
      />
    </NaverMap>
  );
}
...

지도에 표시할 마커는 NaverMapAPI 함수 안의 <NaverMap> 컴포넌트 안에 넣어준다.

• position으로 마커의 위도/경도를 직접 지정할 수 있다.

• animation으로 마커 애니메이션을 설정할 수 있다. 애니메이션은 0, 1, 2 등 3가지 종류가 있다.

• onClick으로 마커를 클릭했을 때 실행할 함수를 설정할 수 있다.