[React] react-naver-maps를 활용하여 네이버 지도 API 연동하기

위치 기반 기능을 구현하기 위해서는 외부 지도 API 연동이 필수적인 경우가 많은데, 이번 프로젝트에서는 지도 기능 구현을 위해 네이버 지도 API를 연동하였다.

우리나라에서 많이 사용하는 지도 서비스 중 하나인 네이버 지도를 활용했고,
react-naver-maps 라이브러리를 사용하여 비교적 간단하게 리액트 환경에 적용할 수 있었다.

react-naver-maps는 네이버 지도 API를 리액트 컴포넌트 형태로 사용할 수 있도록 도와주는 라이브러리로,
지도의 렌더링뿐 아니라 마커, 이벤트 처리 등도 손쉽게 구현할 수 있다.

react-naver-maps 설치

npm install react-naver-maps

NaverMapsProvider 설정

네이버 지도 API를 사용하기 위해 최상위 컴포넌트를 NaverMapsProvider로 감싸준다.

// MapPage.jsx

import React from 'react';
import MapNavigation from './MapNavigation';
import GlobalCSS from '../../Style/GlobalCSS';
import NaverMapContainer from './NaverMapContainer';
import { NavermapsProvider } from 'react-naver-maps';

const MapPage = () => {
  return (
    <NavermapsProvider ncpClientId="MY_NAVERMAPS_CLIENT_ID">
      <GlobalCSS />
      <MapNavigation />
      <NaverMapContainer />
    </NavermapsProvider>
  );
};

export default MapPage;

ncpClientId: 네이버 클라우드 플랫폼에서 발급받은 API 키

지도 컨테이너 생성

지도가 렌더링될 영역을 생성한다.

// NaverMapContainer.jsx

import React from 'react';
import MyMap from './NaverMap/MyMap';
import { Container as MapDiv } from 'react-naver-maps';

const NaverMapContainer = () => {
  return (
    <MapDiv
      style={{
        width: '100%',
        height: '100%',
        marginTop: '-30px',
      }}
    >
      <MyMap />
    </MapDiv>
  );
};

export default NaverMapContainer;

지도 및 마커 렌더링

NaverMap과 Marker를 사용하여
실제 지도와 마커를 화면에 출력할 수 있다.

// MyMap.jsx

import React from 'react';
import {
  NaverMap,
  Marker,
  useNavermaps,
} from 'react-naver-maps';

const MyMap = () => {
  const navermaps = useNavermaps();

  return (
    <NaverMap
      defaultCenter={
        new navermaps.LatLng(37.3595704, 127.105399)
      }
      defaultZoom={10}
    >
      <Marker
        defaultPosition={
          new navermaps.LatLng(37.3595704, 127.105399)
        }
      />
    </NaverMap>
  );
};

export default MyMap;

react-naver-maps를 사용하면
리액트 환경에서도 네이버 지도 기능을 비교적 간단하게 구현할 수 있다.

또한 Marker, InfoWindow, Polyline 등 다양한 기능도 함께 제공하기 때문에
위치 기반 서비스나 지도 UI를 구현할 때 유용하게 활용할 수 있다.

Reference

React Naver Maps
React 웹페이지에서 네이버 지도 API 사용하는 방법
[리액트 네이버 맵 API] 맵 띄우기