polygon에서 event에대한 질문

[hwimin-kim]

예제를 참고하면서 polygon그리는 것 까지 성공하였습니다. polygon내에서 event를 사용하는 방법을 알 수 있을까요??

[zeakd]

안녕하세요 @hwimin-kim 아직 많이 부족한 Document인데 관심 가져주셔서 감사합니다. 메인페이지 소개에 있듯이 모든 네이버 이벤트는 on + CamelCasedEvent 이름 props 로 사용가능합니다.

만약 Polygon 에서 click, mouseup event를 핸들링하시고 싶으시다면 onClick, onMouseup Props를 사용하시면됩니다.

<Polygon onClick={clickHandler} onMouseup={mouseupHandler}  ... />

다른 질문이 있으시다면 남겨주세요. 이슈는 닫도록하겠습니다. 😄

[hwimin-kim]

빠른답변 감사합니다. 한가지만 더 여줘바도 되나요? 만약 폴리곤에 마우스를 가져가면 폴리곤 색을 변경하는 마우스오버 이벤트를 하고싶으면 초기값이 state = { setOptions: " ", fillColor: "#004ff0" } 이면 handleMouseOver = () => { this.setState({ setOptions: { fillColor: "#011df0" } }); }; 이런식으로 사용하면 되는건가요?

[zeakd]

@hwimin-kim 님 말씀하신 fillColor 옵션은 Polygon Options로, 직접 props로 넘겨주시면됩니다.

<Polygon
  onMouseover={() => {
    // hover
    this.setState({ fillColor: "#011df0" });
  }}
  onMouseout={() => {
    // default
    this.setState({ fillColor: "#004ff0" });
  }}
  fillColor={this.state.fillColor}
/>

사용하시려는 PolygonOptions 에 있는 모든 옵션은 props로 사용가능합니다.

[hwimin-kim]

콘솔상에서 fillColor 변수 값이 바뀌는 것은 확인할 수 있지만 폴로곤 색은 그대로 입니다. 네이버 지도 문서에는 setOptions라는 함수를 이용하여 옵션 값을 넣어주던데 그런식으로 하는것인지 제가 실수한것인지 가르쳐주시면 감사하겠습니다. naver.maps.Event.addListener(polygon, "mouseover", function(e) { map.setCursor("pointer");

    polygon.setOptions({
        fillOpacity: 0.8
    });
});

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

[zeakd]

네 @hwimin-kim 님. navermaps에서 setOptions는 OverlayView를 상속받은 객체들 (Marker, Polygon, Circle 등등) 모두가 공통적으로 가지고 있는 함수이며 말그대로 option을 설정한다는 의미를 가지고 있습니다. 각 오버레이들은 설정가능한 고유한 옵션들을 가지고 있습니다.

그중 폴리곤은 PolygonOptions를 가지고 있는데요, 문서에도 나와있듯 사용할 수 있는 옵션은 다음과같습니다.

• paths
• strokeWeight
• strokeOpacity
• strokeColor
• strokeStyle
• strokeLineCap
• strokeLineJoin
• fillColor
• fillOpacity
• clickable
• visible
• zIndex

각 폴리곤 객체는 각각 이 Parameter들을 가지고 있고 기본적으로 navermaps에서 이들을 조작할 수 있는 방법은 세가지가 있습니다.

1. 생성시 입력 new naver.maps.Polygon({ fillColor: 'blue' })
2. setOptions를 통해 입력 (말씀해주신 방법) polygon.setOptions({ fillColor: 'blue' })
3. parameter key를 이용하는 방법 polygon.setOptions('fillColor', 'blue')

(fillColor의 경우 setStyles 를 사용해 두가지 방법이 더 있습니다.)

즉, polygon객체는 fillColor라는 parameter를 내부에서 관리하고 있으며 setOptions는 이 parameter를 관리하는 방식중에 하나입니다.

그러나 React의 경우는 setOptions같은 함수를 통해 직접적으로 컴포넌트의 상태를 변경하는 것은 Anti Pattern으로 지양하고 있습니다. 대신 이런 parameter를 props로 넘기는 것을 권장합니다. 이는 React의 Reconcilation방식과 연관이 있습니다.

본 라이브러리 React-Naver-Maps 는 navermaps의 방식을 React의 방식으로 처리할 수 있게끔 도와주는 역할을 하고 있습니다. 따라서 모든 options 들은 props로 넘겨주는 방식을 취합니다.

<Polygon
  fillColor={'blue'}
/>

React의 방식을 지키기 위해 setOptions와 같이 객체를 직접 mutate하는 방식은 제공하지 않음을 알려드립니다.

다만 꼭 navermaps의 객체가 제공하는 함수를 그대로 사용하시고 싶으시다면 인스턴스에 직접 접근하기 를 참고하시면 됩니다. Polygon 컴포넌트에서 naverRef로 ref를 얻어오게되면, ref.instance는 navermaps가 생성한 polygon객체와 동일합니다. 하지만 이러한 방식을 사용하시려면 React의 Reconsilation 이 정상적으로 작동하지 않으며, anti pattern으로 React-Naver-Maps의 기능을 활용하지 않는 것이므로 굳이 React-Naver-Maps를 사용하지 않으셔도 됩니다.

기존의 방식이 익숙하신 경우에는 React-Naver-Maps 제거하시고, 네이버지도 시작하기 를 따라 script sdk를 추가하신다음 관련된 코드를 componentDidMount에 넣으시면 됩니다.

class MyMap extends React.Component {
  render () {
    return <div id='map' />
  }

 componentDidMount() {
   const mapOptions = {
    center: new naver.maps.LatLng(37.3595704, 127.105399),
    zoom: 10
  };

  const map = new naver.maps.Map('map', mapOptions);
 }
}

감사합니다 😄

[hwimin-kim]

막힌부분을 해결하였습니다. 세세한 설명덕분에 이해하기도 더 쉬웠습니다. 감사합니다 개발자님

[zeakd]

@hwimin-kim 님 코드살펴보았습니다. 위의 경우는 this.PaintPolygon이 render() 호출시에 새로 생성되지 않아서 발생한 문제입니다.

  PaintPolygon = this.MakePolygon.map((item, index) => (
    <Polygon
      paths={item}
      fillColor={this.state.fillColor}
      fillOpacity={this.state.fillOpacity}
      strokeColor={"#fff"}
      strokeOpacity={0.9}
      strokeWeight={2}
      key={index}
      clickable={this.state.clickable}
      onMouseover={this.handleMouseOver}
      onmouseout={this.handleMouseOut}
    />
  ));

이 코드는 컴포넌트가 생성시에 실행되는데, React에서는 이런 부분의 코드는 모두 render()함수 안에 작성되어야 합니다. 다음과같이 수정해주세요

  ...
  render() {
    const PaintPolygon = this.MakePolygon.map((item, index) => (
      <Polygon
        paths={item}
        fillColor={this.state.fillColor}
        fillOpacity={this.state.fillOpacity}
        strokeColor={"#fff"}
        strokeOpacity={0.9}
        strokeWeight={2}
        key={index}
        clickable={this.state.clickable}
        onMouseover={this.handleMouseOver}
        onMouseout={this.handleMouseOut} // onmouseout => onMouseout 오타 수정
      />
    ))

    return (
      <div>
        <NaverMap
          id="maps-examples-polygon"
          style={{
            width: "100%",
            height: "400px"
          }}
          defaultCenter={
            new window.N.LatLng(37.17382562913947, 126.78880717195284)
          }
          defaultZoom={2}
          disableDoubleClickZoom={this.state.disableDoubleClickZoom}
          disableDoubleTapZoom={this.state.disableDoubleTapZoom}
          scrollWheel={this.state.scrollWheel}
        >
          {PaintPolygon}
        </NaverMap>
      </div>
    );
  }
}

이 문서가 참고가 될 것 같습니다 리스트와 key

React에서 render()함수는 현재 컴포넌트의 props와 state를 확인하여 그에 따라 컴포넌트를 생성해야 하기 때문에 state, props를 사용하는 컴포넌트들은 모두 render()함수안에서 생성하셔야 합니다.

아마도 PaintPolygon을 render밖에서 선언하신 이유는 render함수 안에서 매번 컴포넌트의 리스트를 생성하는 것이 비효율적으로 보이셔서 그랬을 거라 추측되는데요. 이러한 문제를 해결해주는 것이 Reconsilation입니다. 이 문서가 도움이 될것입니다. Reconsilation

추가로, 만약 CTPRVN.features가 앱 내에서 인터렉션을 통해 가변적으로 변하는 데이터라면, MakePolygon역시 render() 안에서 호출되어야합니다.

[zeakd]

@hwimin-kim 작성하는 동안 해결이 되었군요. 만드시는 프로그램 잘 완성하실 수 있길 바랍니다!

[hwimin-kim]

개발자님 너무감사합니다. ㅠ.ㅠ 복받으실거에요