2024/06/18 팀프로젝트(Festiall) : 상세페이지 - 3 카카오 맵 API

이번에는 카카오 맵 API를 이용해서 행사 장소를 지도로 보여주기

일단 결과

카카오 맵 API를 이용하기 위해서는 먼저 

https://apis.map.kakao.com/web/guide/

여기에 나와있는대로 그대로 잘 따라해주면 API 키를 발급받을 수 있다.

(공식문서라 기본적인 사용법도 나와있음)

발급받은 API키를 토대로 자바스크립트 API를 가져오기

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>

(참고로 나의 경우에는 리액트로 작업해서 루트 index.html에 삽입해줬다.)

 

이제 카카오 맵을 import하고 사용해주기

import { Map, MapMarker } from 'react-kakao-maps-sdk';

...

	return (...
				<Map // 지도 보여주기
                center={{ lat: 위도, lng: 경도 }}
                style={{
                    width: "1280px",
                    height: '500px',
                    borderRadius: '20px',
                }}
            	>
                <MapMarker // 특정 위치 찝어주기
                    style={{
                        border: 'tranparent'
                    }}
                    position={{ lat: 위도, lng: 경도 }}
                >행사장소
                </MapMarker>
            </Map>
            ...)

근데 행사 위치의 위도랑 경도를 어떻게 구하지?

역시 큰 회사라 그런가 주소만 입력하면 해당 주소의 위도와 경도를 알려주는 API도 있었다.

(단, 정확한 주소 입력해야함)

 

geocoder 이용하기

https://apis.map.kakao.com/web/sample/addr2coord/

정확하고 자세한 사용법은 역시 공식문서

공식문서를 참고해서 인풋으로 받은 주소로 위도와 경도 받아내기

const geocoder = new kakao.maps.services.Geocoder();
geocoder.addressSearch(place?.address, (result, status) => {
	if (status === kakao.maps.services.Status.OK) {
		const newCoords = new kakao.maps.LatLng(result[0].y, result[0].x);
		setLat(newCoords.Ma);
		setLng(newCoords.La);
	}
}

근데 이렇게 하니까 또 다시 무한 렌더링 => useEffect안에 넣어주기로 해결했는데

또 다른 문제 지도가 렌더링이 안된다.

		<Map
                center={{ lat, lng }}
                style={{
                    width: "1280px",
                    height: '500px',
                    borderRadius: '20px',
                }}
            	>
                <MapMarker
                    style={{
                        border: 'tranparent'
                    }}
                    position={{ lat, lng }}
                >행사장소
                </MapMarker>
            </Map>

흠.. 분명 콘솔로 확인했을 때, state는 제대로 바뀌는데

const FestMap = () => {
        return (
            <Map
                center={{ lat, lng }}
                style={{
                    width: "1280px",
                    height: '500px',
                    borderRadius: '20px',
                }}
            >
                <MapMarker
                    style={{
                        border: 'tranparent'
                    }}
                    position={{ lat, lng }}
                >행사장소
                </MapMarker>
            </Map>
        );
    };
    
 return (...
 			<FestMap></FestMap>
         ...)

이렇게 바꾸니 매우 매우 잘 된다.

무슨 차이일까

왜 따로 빼놔서 return문에 넣어주면 잘 되고 바로 return문에 넣으면 안 될까