Closed SaebyeolJu closed 2 years ago
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가 공란이였음
카카오 맵 지도 - MapContent.js 파일 확인
<검색 초기>
<검색 후>