[react] 리액트에서 Naver Map 사용하기

📍 리액트에서 Naver Map 사용하기


> Naver Cloud Platform 가입하기

  • 원래는 네이버에서 무료로 map api를 제공해줬었는데 무료 정책이 바뀜
  • 네이버 클라우드 플랫폼에 가입해서 Client 아이디를 발급받고, application을 등록해야 함
  • 참조 : https://docs.ncloud.com/ko/naveropenapi_v3/application.html

🛠 가입하러 가기

❗️ 주의: Application 등록할 때 로컬호스트로 설정을 하고 싶으면 localhost:[포트번호]이 아니라 [포트번호] 으로 해줘야 함

> react-naver-maps 설치

naver-maps의 리액트 용 npm 설치


npm install react-naver-maps


yarn add react-naver-maps

> React 화면에 띄우기

1. index.js

  • <App><RenderAfterNavermapsLoaded >로 감싸주고 발급받은 Client Key넣어주기

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { RenderAfterNavermapsLoaded } from "react-naver-maps";

    <RenderAfterNavermapsLoaded ncpClientId={"인증키"}>
      <App />

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA

2. App.js

import React from "react";
import Home from "./view/Home";

function App() {
  return (
      <Home />

export default App;

3. Home.js

import React from "react";
import "./home.scss";
import NaverApiMap from "./NaverAPIMap";

function Home() {
  return (
    <div className={"outline"}>
      <div className={"container"}>
        <div className="nav"> nav bar </div>
        <div className={"map"}></div>

export default Home;

4. NaverApiMap.js

  • 네이버 지도 컴포넌트에 기본 설정값 추가
  • 참조: https://github.com/navermaps/maps.js.ncp
import React from "react";
import { RenderAfterNavermapsLoaded, NaverMap } from "react-naver-maps";
import "./naverApiMap.scss";

export const NaverAPIMap = (props) => {
  return (
    <RenderAfterNavermapsLoaded clientId={"인증키"}>
        mapDivId={"react-naver-map"} // default name

export default NaverAPIMap;

> 완성 화면