[Map] React Kakao Map SDK (1)

지도 API 중에서 카카오맵을 사용하기로 한 이유

카카오맵 API를 사용하는데 필요한 문서와 예제가 많아 빠르게 구현하고 추후 유지보수하기 쉬울 것이라고 판단하여 선택

---

1. 설치

npm install react-kakao-maps-sdk

 

2. 스크립트 추가

라이브러리를 사용하기 위해 index.html 파일에 아래의 코드 추가

 

     <!--// kakao map api -->
    <script
      type="text/javascript"
      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%VITE_APPKAKAO_JAVASCRIPT_KEY%&libraries=services,clusterer"
    ></script>
    <!-- kakao map api //-->

 

Vite로 발급받은 키를 환경변수로 만들어 접근하도록 하여 VITE_APPKAKAO_JAVASCRIPT_KEY 부분에 발급받은 키를 넣으면 됨

 

 

3. 맵 화면에 출력

구글링 해보니 여러 방법이 있었는데 카카오 공식문서를 참고하여 코드 작성함

 

import React, { useEffect, useRef } from 'react';


const { kakao } = window;

const KakaoMap = () => {
  const mapContainer = useRef(null);
  const mapStyle = { width: '100%', height: '40vh', display: 'block', margin: '0 auto' }; // 지도 스타일 설정

  useEffect(() => {
    const mapPosition = new kakao.maps.LatLng(333.450701, 126.570667); //지도의 초기 위치 설정
   
   
    const mapOptions = {
      center: mapPosition, 
      level: 4, // 지도 확대 레벨
    };

    // 지도 생성
    const map = new kakao.maps.Map(mapContainer.current, mapOptions);
    
   }, []);
   
   return (
    <div>
      <div id="map" ref={mapContainer} style={mapStyle} />
    </div>
  );
};

export default KakaoMap;

 

1. useEffect 훅을 사용하여 컴포넌트가 마운트될 때 한번만 실행되도록 함

2. mapContainer 참조(ref)를 사용하여 지도가 렌더링 될 DOM요소를 참조함

3. mapOptions 객체 내 level 속성을 사용하여 지도 초기의 확대 수준을 설정 (필요에 따라 변경하면 됨)

4. useRef를 사용하여 div 요소는 mapContainer ref를 통해 지도가 렌더링될 DOM 요소를 참조

 

---

 

 

[ 참고 ]

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

https://velog.io/@wlwl99/React-Kakao-Map-SDK-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

https://velog.io/@bokjunwoo/React-Kakao-Map-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0