React 와 daum map api를 사용하는데 문제가 있습니다

react router와 함께 사용하구 있는데요,
지도를 생성하는 컴포넌트의 componentDidMount에서 아래와 같이 지도를 생성해 주고 있습니다.

componentDidMount() {
const { infos, match } = this.props;
const lat = infos[Number(match.params.id) - 1].lat;
const lng = infos[Number(match.params.id) - 1].lng;

let mapContainer = document.getElementById("map"),
mapOption = {
  center: new daum.maps.LatLng(lat, lng),
  level: 3
};

let map = new daum.maps.Map(mapContainer, mapOption);

}

코드에 있듯이 router에서 id라는 params를 가져다가 지도의 중심을 설정해 주고 있는데요,
/map/1 의 url에서 /map/2의 url로 이동을 하게 되면 다른 컴포넌트들은 원하는대로 변하는데 지도의 중심이 변하지가 않습니다.

componentDidMount에서 지도 생성을 했기 때문이라고 생각되는데 이걸 어떻게 해결해야 할까요??
페이지 자체를 새로고침 하면 원하는 대로 바뀌어져 있긴 합니다.

혹 이 부분을 참고하시면 도움이 되지 않을까 싶은 생각이 들어요.

1개의 좋아요