네이버 지도 위에 폴리곤을 그려보자 In React

 

리액트에 최적화된 코드 스타일로 네이버 맵에서 밤섬 위에 폴리곤을 그려보자 

 

 

 

https://navermaps.github.io/maps.js.ncp/docs/tutorial-3-polygon-simple.example.html

NAVER Maps API v3

 

공식 문서에서 제공하는 폴리곤 예제를 리액트에서 쓰기 좋게 작성했다 ~,~ 

 

 

 

**useLoadMap은 네이버 지도를 초기화하고(mapRef) map 객체(mapObject)를 리턴하기 위해 제가 따로 만든 커스텀 훅 입니다.**

이 포스트에서는 useLoadMap지도 초기화 코드를 생략했으며 추후 포스트할 예정임.

 

 

 

네이버 지도 api를 사용해 한강에 있는 밤섬위에 폴리곤을 그려봤다. 

위도 경도는 대충 찍어온거라 모양이 엄청나게 찌그러져 있는 점 양해바람... 

 

참고로 폴리곤 좌표 리스트는 아래와 같이 이중 배열로 넣어줘야한다

오류 없이 작성했는데도 지도에 폴리곤이 안 뜨는 분들은 이 부분을 체크해보시길! 

 

import { useEffect } from "react";
// 해당 코드 만으로 네이버 지도를 로드할 수 없습니다 지도 호출 부분은 따로 작성해야함(useLoadMap)
const MapWithPolygon = () => {
  const { mapObject , mapRef } = useLoadMap();
  //맵 초기화 & 호출 코드는 해당 포스트에 포함되어있지 않습니다


  const bamsumCoordinates = [
    { lat: 37.540295400459776, lng: 126.92257594754014 },
    { lat: 37.54137410126921, lng: 126.92688464861735 },
    { lat: 37.53956037883299, lng: 126.9306783655637 },
    { lat: 37.53801885028395, lng: 126.93339919890408 },
    { lat: 37.53569458673736, lng: 126.93388843434408 },
    { lat: 37.53810052232298, lng: 126.921175 },
    { lat: 37.540295400459776, lng: 126.92257594754014 },
  ]; //지도 위에 그려질 폴리곤 좌표 리스트. 굳이 처음과 끝을 맞추지 않아도 네이버 지도 api가 알아서 잘 그려줌
  
  useEffect(() => {
    if (!mapObject) return;

    const polygon = new naver.maps.Polygon({
      map: mapObject, //지도 객체
      paths: [bamsumCoordinates], //위도 경도 좌표 리스트
      fillColor: "#ff7d19", //배경 색
      fillOpacity: 0.3, //배경 투명도
      strokeColor: "#ff7d19", //테두리 색
      strokeOpacity: 0.6,
      strokeWeight: 3,
    });

    return () => {
      polygon.setMap(null);
    };
  }, [bamsumCoordinates, mapObject]);
  return (
      <div ref={mapRef} className="map"></div>
      //ref를 통해 div요소에 접근 -> 지도 초기화.
  );
};
export default MapWithPolygon;

 

리액트에서는 getElementbyId 등을 사용해 돔 요소를 직접 조작하는 것보다는 ref를 통해 접근하는것을 권장한다. 

물론 리액트에서도 직접 조작해서 접근하는것이 불가능한 것은 아니지만,

 

가상 DOM을 사용하는 리액트에서 DOM 요소를 직접 조작할 경우, 가상 돔과 실제 돔 사이에 불일치가 발생해 의도치 않은 결과가 초래될 수 있으므로 Ref를 사용하는 것이 좋다!