카카오맵에서 클릭한 마커의 정보를 담은 모달창 켜기

 

 

 

카카오맵에서 클릭한 마커의 정보를 담은 모달창 켜기

아래 gif는 완성된 화면이다.

마이페이지 내가가본곳에 있는 지도에서 마커 누르면 에러뜨는 현상 해결 :

저번 배열map한 후 모달컴퍼넌트에 props로 배열의 해당 인덱스 정보를 전달하는 것과 같은 원리이다.

https://wnsdufdl.tistory.com/254

배열을 map하고 각 인덱스의 자료를 모달창에 렌더링시킬때, 무조건 가장 마지막 인덱스의 자료

 

 

한 state에 배열인덱스를 통째로 넣어준 후, 배열 인덱스가 들어간 state를 모달컴포넌트에 props로 전달.

setSelectedPosition()에 원하는 인덱스position[i]를 할당하고 selectiedPostion을 하위컴퍼넌트에 전달했다.

하위컴퍼넌트인 VisitedList.js에서 useEffect()를 사용하여 selectedPosition이 업데이트될때마다 openModalHandler()가 실행되도록 한다.

 

이때 useEffect()의 두번째 인자에 selectedPosition만 넣으면 같은 항목을 연속해서 고를때는 값이 바뀌지 않은것으로 읽히기 때문에, 클릭했다는 boolean신호 merkerClick도 같이 넣어주었다.

 

후에 순수함수로 만들기 위해 의존성배열을 다음과 같이 수정하였다.

openModalHandler()를 통해 모달창이 켜진다.

 

모달창의 props에는 selectedModal이 전달된다.

 

 

---

 

 

혹시 배열에서 매핑해서 모달창을 열었는데, 제일 마지막 인덱스의 모달창이 열리는 버그를 겪고 있는 사람은

 

아래 게시글을 읽고 그냥 따라하면 된다.

 

 

https://www.tutorialguruji.com/react-js/modal-only-shows-last-element-of-mapped-array-in-react/