[Client - Map] 지도 렌더링 문제 해결

[SaebyeolJu]

카카오 맵 지도 - MapContent.js 파일 확인

1. 검색을 할 때 마다 새로 렌더링 되어서 지도 전체가 중복으로 불러와짐
2. 지도 상 marker가 표시되지 않음

<검색 초기>

<검색 후>

[SaebyeolJu]

MapContent.js에서 useEffect 코드 오류. Dependency를 비워놔서 검색이 될 때마다(cityName이 변경될 때 마다) 렌더링 되는 상황이였음. Dependency를 추가 해 cache에서 cityName이 바뀔 때 마다 렌더링하는 것으로 고침

` useEffect(() => { const container = document.getElementById("map"); const options = { center: new kakao.maps.LatLng(37.365264512305174, 127.10676860117488), level: 6, }; const map = new kakao.maps.Map(container, options);

  var iwContent = `<div style="padding:5px;" class = "map-window"><div class="title">${place.name}</div><div class = "desc"><ul>${place.address}</ul><ul>${place.phone}</ul></div></div>`, // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
    iwPosition = new kakao.maps.LatLng(placePos[0], placePos[1]), //인포윈도우 표시 위치
    iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시 됨

if (loading) {
  console.log("로딩 중 입니다.");
}
if (cacheData.mapInfoVar && data) {
  data.cities.forEach((city) => {
    city.places.forEach((place) => {
      Pos = trimPos(place.pos[0]);
      displayMarker(city, Pos, place);
      bounds.extend(new kakao.maps.LatLng(Pos[0], Pos[1]));
    });
  });

  setBounds();
}

}, [data.cities]);`

이전은 Dependency가 공란이였음