React에서 네이버 지도 API 사용하기
1. public/index.html에 script 넣어주기
<!-- public/index.html -->
<script
type="text/javascript"
src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=발급받은ClientKey"
></script>
index.html의 <head></head> 안에 위와 같은 script를 넣어준다. ClientId= 뒤에 발급받은 Key를 넣어준다. 환경변수를 사용하고 싶다면 <%=process.env.REACT_APP_환경변수이름%>으로 적어주면 된다.
<!-- 환경변수 사용 예시 -->
<script
type="text/javascript"
src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=<%=process.env.REACT_APP_MAP_CLIENT_ID%>"
></script>
단, 개발자 도구에서 key 값이 다 보인다는 단점이 있다... 그래서 실제 서비스되는 웹 사이트에 적용하기엔 적절하지 않을 테니 참고해주시길! 😅
2. 지도 생성하기
// src/Map.js
const mapRef = useRef(null);
const lat = // 위도 숫자로 넣어주기
const lng = // 경도 숫자로 넣어주기
useEffect(() => {
const { naver } = window;
if (mapRef.current && naver) {
const location = new naver.maps.LatLng(lat, lng);
const map = new naver.maps.Map(mapRef.current, {
center: location,
zoom: 17, // 지도 확대 정도
});
new naver.maps.Marker({
position: location,
map,
});
}
}, []);
return (
<div ref={mapRef} style={{ width: "500px", height: "500px" }}></div>
);
지도를 넣고 싶은 곳에 useRef로 ref를 하나 만들어준다. 그리고 위도, 경도 값을 넣어주고 zoom 값은 원하는 대로 넣어준다. zoom은 지도의 확대 정도이다. 적절히 숫자를 바꿔보면 뭔지 바로 알 수 있으니, 원하는 값으로 적용해주면 됨! 그리고 반드시 width와 height 값을 지정해주어야 화면 상에 보이기 때문에 CSS로 width와 height를 꼭 설정해주어야 한다.
참고 자료
https://navermaps.github.io/maps.js/docs/tutorial-2-Getting-Started.html
'FE - Tools > React' 카테고리의 다른 글
| [React] 제어 컴포넌트와 비제어 컴포넌트를 적절하게 사용하는 법 (0) | 2023.03.12 |
|---|---|
| [React] Express로 CORS 에러 해결하기 (0) | 2023.03.01 |
| [React] useParams 이용하기 (0) | 2022.12.22 |
| [React] useEffect와 useLayoutEffect의 차이 (0) | 2022.12.20 |
| [React] useRef 이용해서 스크롤 특정 위치로 이동시키기 (0) | 2022.12.13 |
