리액트에서 카카오맵 API 사용

프로젝트에서 지도를 사용하기 위해서 우선 카카오 디벨로퍼스에서 내 애플리케이션에서 카카오 맵과 관련된 애플리케이션 키를 지급 받았다.

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=APIKEY&libraries=LIBRARY"></script>

위의 코드를 public > index.html에 추가한다. head부분에 추가해줬다.

그리고 KakaoMapScript.js를 따로 만들었다. 마커를 커스텀해서 사용할거라 아래와 같이 코드를 써주었다.

import bongbbangmarker from '../assets/img/bongbbangmarker.png';
const { kakao } = window;

export default function KakaoMapScript(longitude, latitude) {
 const container = document.getElementById('mymap');
 const options = {
   center: new kakao.maps.LatLng(33.450701, 126.570667),
   level: 3,
 };
 const map = new kakao.maps.Map(container, options);
 const imageSrc = bongbbangmarker, // 마커이미지의 주소
   imageSize = new kakao.maps.Size(190, 150), // 마커이미지의 크기
   imageOption = { offset: new kakao.maps.Point(100, 105) }; // 마커이미지의 옵션, 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정

 // 마커의 이미지정보를 가지고 있는 마커이미지를 생성
 const markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption),
   markerPosition = new kakao.maps.LatLng(33.450701, 126.570667); // 마커가 표시될 위치

 // 마커를 생성
 const marker = new kakao.maps.Marker({
   position: markerPosition,
   image: markerImage, // 마커이미지 설정
 });

 // 마커가 지도 위에 표시되도록 설정
 marker.setMap(map);
}

카카오 맵 설명서에서 그대로 복사해주고 이미지만 바꾸어주었다.

그리고 사용할 파일에서 const container = document.getElementById('mymap');에서 id를 'mymap'으로 주었는데, 지도를 그려줄 div에 id를 넣어준다.

...
<KakaoMap id="mymap"></KakaoMap>
...
const KakaoMap = styled.div`
 margin-top: 3.125rem;
 height: 18.75rem;
 width: 25rem;
 display: flex;
 justify-content: center;
 align-items: center;
 border-radius: 20px;
`;

styled-components를 사용해서 위와 같이 만들어주었다.