TIL 23.04.02 Kakao Map 줌 인 아웃 마커 중복 에러

1. 문제점

 

기존에 카카오맵을 불러오는 방식은 다음과 같았다.

이렇게 되니 기존에 있던 마커리스트를 지워주는 코드를 작성하지 않아도 마커리스트가 변경돼면, 알아서 스크립트가 새로 로드되면서 굳이 사용할 필요가 없었다. 

useEffect(()=> {
	1. 카카오지도 스크립트 로드하는 코드
    
    2. 마커리스트 변경됐을때 실행할 코드
},[마커리스트])

 

그러나 위 코드는 다음과같은 문제가 있었다. 지도 객체가 중복해서 로드되므로 줌 인, 줌 아웃 할때마다 전에 로드됐던 마커리스트들이 힐끔힐끔 보이는 단점이 있었다.  

 

 

 

2. 시도해본 것

 

카카오 dev talk 에 나랑 같은 문제점을 가진 사람들을 찾아보니 지도 객체가 중복로드돼서 이런 버그가 발생한다고 해서 지도 로드 코드는 최초 한번만 실행한 후, 이후 마커리스트가 변경됐을 때 코드를 다음과같이 새로 작성해보았다. 

 

useEffect(()=> {
	1. 카카오지도 스크립트 로드하는 코드
},[])


useEffect(()=> {
   2. 마커리스트 변경됐을때 실행할 코드
},[마커리스트])

 

이런 방식으로 작성하니 지도가 중복되지않고 깔끔하게 나왔다. 다만 위의 useEffect 에서 선언한 지도 객체를 담아둘 변수가 필요해서 useState를 사용하였다.

 

 

3. 해결방안

 

다음처럼 kakaoMap 에 map 을 넣고

  const [kakaoMap, setKakaoMap] = useState(null);
  
  useEffect(()=> {
  1. 지도 스크립트 로드하는 코드
  
  const container = document.getElementById("map");
  setKakaoMap(map);
  
  },[])

 

 

다음에 사용할 마커리스트가 변경됐을 때 사용할 useEffect 에서 kakaoMap을 불러와서 사용하면 된다.

이 때, 마커리스트와 오버레이를 담을 배열은 useRef로 담아 사용하였다.

 

4. 알게된 것

 

라이브러리를 사용할 때는 공식문서를 참고하여 해결해보자.