지도에 마커찍는 부분은 구현을 다 했고 여러개 마커찍기, 위치기반 마커찍기 등 다양한 기능들로 구현을 연습해 보았다. 그래서 사실 크게 걱정하지 않았는데, 이것 또한 발목을 잡았다. 전에 구현해 놓은 코드를 사용하여 쉽게 구현하려 했지만, props를 받아온 값을 다른 방법으로 가공하고 전달해야 해서 코드 수정을 하였다.
우선 검색을 하고 그 값을 바로 찍어주는 게 아니라 props전달하고 모달창 닫는 순간 랜딩페이지에 마커가 찍히게 해야 하였다.
우선 처음에 로직을 생각 할 때에는 단순히 마커찍는 로직을 만들고 그 로직에 props값 주면 되지 않을까 했다. 그렇지만 계속해서 여러가지 에러가 났다. 우선 그 로직 자체가 잘 다듬어 지지 않았고 그리고 그 로직은 모달창이 닫히면 실행이 자동적으로 되어야 했다. 그래서 useEffect를 사용해서 모달창 닫을 때 checkedPlace라는 state값으로 Props 받으니 checkedPlace가 넘어올 때 실행되도록 했다.
useEffect(() => {
gettingLocation(checkedPlace)}
},[checkedPlace])이렇게 의존성배열에 checkedPlace넣어 구성하였는데
그렇지만 계속해서
Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'y')
이런 에러 발생.
코드가 우선 1차적으로 잘못되었지만 그 전에 useEffect는 랜딩 페이지에 들어가면 곧바로 랜더링이 되기에, 모달창에서 값을 보내기도 전에 실행되어 해당 오류 발생.
useEffect(() => {
if(checkedPlace) {
gettingLocation(checkedPlace)}
},[checkedPlace])조건문 붙여서 checkedPlace오면 되도록 수정. 그래도 모달창에서 값을 보낼 때 계속해서 같은 오류 발생.
어디인지도 얘기 안 해줘서, lat있는 곳 모두 체크하고 그 부분 하나하나 주석처리하고 실행하며 어떤 lat이 문제인지 찾았다. 3군데 정도 문제였는데 모두 코드 수정하고 계속 시도.
checkedPlace state값 변하면 지도가 움직이긴 하는데 갑자기 빈지도로 변함. 아마 gettingLocation함수에 정확한 값이 안 들어가서 인듯.
그래서 checkedPlace state아닌 새로운 state만들어 넣어줌. 그리고 gettingLocation함수는 아래와 같이 place state 이용하여 구성.
const gettingLocation = function (data) {
const newSearch = checkedPlace;
console.log("data-> ", data)
// positions 배열을 복제하여 prevPositions로 사용
const prevPositions = [...positions];
// 검색 결과를 center에 추가.(검색결과위치로 좌표찍기)
setCenter({ lat: newSearch.y, lng: newSearch.x });
// 검색 결과를 positions에 추가.(마커를 찍어줌))
setPositions((prevPositions) => [
...prevPositions,
{
title: newSearch.place_name,
latlng: { lat: newSearch.y, lng: newSearch.x },
},
]);
}해당 장소로 지도 이동 및 마커 찍기 완료. 그렇지만 장소 수정하여도 해당 마커 지워지지 않는 문제. 이 부분 해결 필요.
