카카오 지도 api 리액트에 적용

카카오 map api 적용 순서

1. 키발급 , javascript 키

2. 개발환경의 로컬 주소를 카카오 api 페이지내의 플랫폼 => web 플랫폼 => 사이트 도메인에 등록

3. kakao 객체를 window 객체의 interface로 추가

주의사항

1. 카카오 지도가 그려질 요소는 반드시 id가 map인 요소이어야 한다.

2. script가 실행코드 보다 먼저 선언 되어야 한다

3. cdn 방식으로 script를 불러오면 카카오 지도를 사용하지 않아도 비용이 들기 때문에 동적으로 생성하자.

코드

카카오 지도 api를 리액트에 적용 시켜봄으로써, 다른 라이브러리 차원에서 리액트를 지원하지 않는 것들도 리액트로 적용할 수 있는데 참고가 되는 코드이다.

// kakao객체를 window 객체의 interface로 추가
declare global {
	interface Window {
		kakao: any;
	}
}
// querySelector 대신 ref로 접근
const map = useRef<any>(null);

	useEffect(() => {
      	// cdn 방식 대신 동적으로 스크립트 추가 
		const script = document.createElement('script')
		// 동적으로 스크립트 만들땐 autoload=false 파라미터 추가
        // 공식문서 참조 
		script.src = '//dapi.kakao.com/v2/maps/sdk.js?appkey=d5a96e8908f8bbad4cfd0abd9ae7cb72&autoload=false'

		document.head.appendChild(script)
		// onload: 스크립트가 로딩이 완료 되었을때 실행
		script.onload = () => {
			window.kakao.maps.load(() => {
				if (mapRef.current) {
					var options = {
						center: new window.kakao.maps.LatLng(33.450701, 126.570667),
						level: 10,
					};

					map.current = new window.kakao.maps.Map(mapRef.current, options)
					// setMap(new window.kakao.maps.Map(mapRef.current, options));
					window.kakao.maps.event.addListener(map.current, 'rightclick', (mouseEvent: any) => {

						console.log(window.kakao.maps.Marker)
						const latlng = mouseEvent.latLng;

						const title = prompt("마커의 타이틀을 입력해주세요.")

						var marker = new window.kakao.maps.Marker({
							map: map.current,
							position: latlng,
							title
						});
						setMarkerList(prev => [...prev, marker])
					});
				}
			})
		}
		// 컴포넌트 unmount시 스크립트 제거 
		return () => script.remove()
	}, [])