[React] React에서 네이버 지도 API 연동하기

React에서 네이버 지도 API 연동하기

 

---

 

목차

들어가며

네이버 지도 API 준비하기

React 프로젝트에 네이버 지도 연동하기

지도에 마커 표시하기

구현 시 주의사항

 

---

 

---

[들어가며]

개인 프로젝트로 공공데이터 API를 활용하여 캠핑장 안내 프로젝트를 진행했다.

사용자가 캠핑장의 위치를 쉽게 알 수 있게 캠핑장 위츠를 지도에 표시하면 좋을 것 같다는 생각이 들었다.

그래서 네이버 지도 API를 사용하여 캠핑장의 위치를 표시할 수 있도록 했다.

 

---

[네이버 지도 API 준비하기]

네이버 클라우드에 로그인을 한다. [바로가기]

NAVER CLOUD PLATFORM

 

서비스 > Application services > Maps 클릭

네이버 클라우드 플랫폼 Applicaion Services 화면

 

이용  신청 클릭

이용 신청 클릭

 

저는 이전에 해둔 내용으로 글을 작성하고 있습니다.

제가 사용할 당시에는 Maps가 AI Naver API에 있었습니다. 👀

Service < AI Naver API 클릭

또는 Service > Applicaoin Services > Maps 클릭

Service < AI Naver API

 

Service > Applicaoin Services > Maps

 

Application 등록 클릭

Application 등록 클릭

 

약관 동의

약관 동의

 

 

Application 이름 설정

Maps에 Web Dynamic Map, Mobile Dynamic Map 선택

Application 이름 설정

 

서비스 호나경 등록에서 개발할 웹서비스의 url을 입력합니다.

[예시]

• localhost:3000에서 개발 중
• 배포한 ip
• 등록한 도메인의 url

을 입력합니다.

저는 local:3000 포트에서 개발주이어서 http://localhost:3000/을 입결해주었습니다.

 

입력 후 등록 클릭

서비스 환경 등록

 

등록이 완료되었다면 Application에서 확인할 수 있다.

인증 정보를 클릭하면 

인증 정보 클릭

 

ClientID와 Client Secret을 확인할 수 있다.

ClientID와 Client Secret

 

---

[React 프로젝트에 네이버 지도 연동하기]

저는 리액트 환경에서 프로젝트를 진행하였습니다.

캠핑장 위치를 표시하기 위해 지도 위에 마커를 찍을 수 있도록 구현하였습니다.

리액트에서 네이버 지도 API를 쉽게 쓸 수 있도록 naver maps 라이브러리를 설치하였습니다.

npm install react-naver-maps

 

index.html에 코드를 넣어줍니다.

이때 key는 clientID입니다.

 <script type="text/javascript"
 src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=<%=process.env.REACT_APP_NAVER_MAP_API_KEY%>"
></script>

 

REACT_APP_NAVER_MAP_API_KEY=네이버지도api키

index.html 파일

.env파일

 

 

---

[지도에 마커 표시하기]

mapX, mapY는 공공데이터캠핑장 api에서 제공받았습니다.

import { Container as MapDiv, Marker, NaverMap, useNavermaps } from "react-naver-maps";

function MapSection({ mapX, mapY }) {
    const navermaps = useNavermaps();

    if (!navermaps || !mapX || !mapY) {
	console.log("위치를 표시할 수 없습니다.");
         return (<p>위치를 표시할 수 없습니다.</p>);
    }

    return (
        <>
	        <MapDiv
              style={{
                  width: "100%",
                  height: "600px",
              }}
          >
            <NaverMap defaultCenter={new navermaps.LatLng(mapY, mapX)} defaultZoom={15}>
                    <Marker position={new navermaps.LatLng(mapY, mapX)} />
            </NaverMap>
          </MapDiv>
        </>
    );
}

export default MapSection;

 

 

---

[구현 시 주의사항]

일부에서는 useEffect를 사용해 지도 로직을 처리하기도 하지만 이 경우처럼 단순히 값의 존재 여부에 따라 화면을 제어하는 상황에서는 조건문 if를 사용하는 것이 더 직관적이고 불필요한 실행을 줄일 수 있다.

https://devyihyun.tistory.com/226

[E-LOG] React Hook "useEffect" is called conditionally.

 

---

잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊

댓글과 좋아요는 큰 힘이 됩니다!

 

[ 참고자료 ]

 

네이버 지도 api가 종료된다는 이메일을 받고 지금에서야 업로드를 하게 되었다... ㅠㅠ

미룬이의 최후