tmap api ref.current.destroy is not a function

polygon이 바뀔때마다 새롭게 1)지도생성 2)폴리콘생성 3)edge맞춤을 하고, cleanUp 함수로 지도를 destroy()하는 useEffect를 만들었다

 

	const tmap = useRef<any>(null)
	useEffect(() => {
		console.log('useEffect')
		tmap.current = new CongestionTmap(37.545555, 127.224, 16)
		tmap.current.addPolygon(polygon[0])
		tmap.current.fitEdge()
		return () => {
			console.log('map', tmap.current)
			console.log('cleanUp')
			tmap.current.destroy()
		}
	}, [polygon])

	return (
		<Panel>
			<div id="qa_map_div" ref={tmap} />
		</Panel>
	)

 

 

 

[문제] 최초 render에서는 잘 그려지는데 다른 poi를 선택해서 두번째 render할 때에는 destroy가 not a function이라면서 안그려졌다

 

 

 

 

반나절 넘는 삽질한 결과 tmap.current값이 최초 render했을 때랑 두번째 render했을 때 다른 object임을 확인함

여기서 useEffect render를 두 번 하는 이유는 React 18에 들어가면서 StrictMode에서는 그렇게 하도록 변경되었기 때문이다!

최초 : tmap 객체
두번째 : div tag → tmap 함수가 안먹는다

 

 

 

해결이라고는 할 수 없고 에러가 나지는 않고 돌아가게는 만들었다

useEffect(() => {
		tmap.current = new CongestionTmap(37.545555, 127.224, 17)
		tmap.current.addPolygons(polygon)
		tmap.current.fitEdge()
		return () => {
			const mapDiv = document.getElementById('qa_map_div')
			tmap.current.id == 'qa_map_div' ? mapDiv?.firstChild?.remove() : tmap.current.destroy()
		}
	}, [polygon])