[React] 카카오맵 지도 띄우기

제론·2022년 8월 3일
4

#React

목록 보기
8/11

프로젝트를 시작하며 맵이 필요했다.

네이버와 구글 카카오 맵중에 고민했는데,
구글은 한글 지원 때문에 먼저 제외 시켰고
네이버는 문서가 굉장히 불친절해 맵 띄워보고 제외시켰다.
카카오는 다행히 누군가 만들어놓은 리액트 버전 라이브러리가 있어서
굉장히 간단하게 맵을 띄울 수가 있었다.(감사합니다..!!)
(원래는 바닐라 자바스크립트 다루듯이 맵을 사용해야한다.)

네이버도 리액트 맵 라이브러리가 있긴한데, 타입스크립트가 적용이 안됐었다.

시작

  1. 우선 카카오 디벨로퍼스에 가서 인증키를 발급받는다.

  2. index.html 내부 body 태그 끝에 script 태그를 추가한다.

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>
  <script type="text/javascript"
    src="//dapi.kakao.com/v2/maps/sdk.js?appkey=4c90a9ac2e5c03af35e19f6193081395&libraries=services"></script>
</body>
  1. 리액트 카카오 맵 라이브러리를 다운 받는다.
    • npm install react-kakao-maps-sdk
    • 타입스크립트를 사용한다면 해당 라이브러리 타입이 모두 적혀있는 kakao.maps.d.ts 패키지도 다운 받는다.
      - npm install kakao.maps.d.ts --save-dev
    • 다운 받으면 리액트 버전 문제 때문에 legacy로 다운 받으라는 오류가 나오는데, --force를 입력해주면 다운 받을 수 있다.
  2. 컴포넌트를 import 해오는 방식으로 간단하게 맵을 띄운다.
function(){
  return (
    <Map // 지도를 표시할 Container
      center={{
        // 지도의 중심좌표
        lat: 33.450701,
        lng: 126.570667,
      }}
      style={{
        // 지도의 크기
        width: "100%",
        height: "450px",
      }}
      level={3} // 지도의 확대 레벨
    />
  );
}
  • 결과가 쉽게 나오는 것을 볼 수 있다.

간단하게 사용법을 알아보았고 추가적으로 마커를 찍는다든지, 위치를 조정한다든지 하는 기능도 쉽게 추가할 수 있다. 프로젝트에 계속 적용하면서 기능들을 다양하게 사용해볼 예정이다!!

profile
Software Developer

0개의 댓글