[React] 리액트에 카카오맵 API 적용하기 - (1)

Wijeong Nam·2022년 11월 26일
0

📌 최근 새로운 팀 프로젝트를 진행하며 카카오맵 API를 공부하게 되었다.
📌 진행하면서 어려웠던 부분을 다시 기억하고자 기록을 남기기로 했다!

0. 준비하기

  • 먼저 kakao Developers 에 가입을 하고 가이드에 따라 appkey를 발급 받기
  • JavaScript 키를 확인해주세요!

참고사이트 : https://apis.map.kakao.com/web/guide/

1. API 연결하기

  • 이미지에 있는 스크립트 부분을 붙여넣기 하면 API 연결 완료
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>
  • 카카오맵 라이브러리 설치
npm install react-kakao-maps-sdk

참고사이트 : https://react-kakao-maps-sdk.jaeseokim.dev/

여기까지 하면 간단하게 세팅 완료입니다 🫡

2. 지도 생성하기

// 예시코드
import { useState } from 'react';
import { Map, MapMarker } from 'react-kakao-maps-sdk';

export default function App() {
	const [state, setState] = useState({
		center: { lat: 33.452613, lng: 126.570888 },
	});

	return (
		<Map
			center={state.center}
			style={{ width: '800px', height: '820px', margin: '0 auto' }}
		>
			<MapMarker position={state.center}></MapMarker>
		</Map>
	);
}
  • 화면에 지도를 그려주기 위해서는 카카오맵 라이브러리에 설치되어 있는 Map 컴포넌트를 불러와야 한다.
  • Map 컴포넌트에는 위치를 표시하기위한 center 속성이 필수로 들어가야한다.
  • center 안에는 위도, 경도 값이 들어가야하고, 나는 state를 객체 형태로 생성하여 위치값을 넣어주었다.

3. 마커 생성하기

  • Map 컴포넌트와 마찬가지로 MapMarker 컴포넌트를 불러와야한다.
  • 마커 생성할 때에도 필수 속성이 있는데 바로 position 이다.
  • position 속성에는 내가 마커를 생성하고 싶은 위치의 위도, 경도 값을 넣어주면 된다!

여기까지 하면 간단하게 지도와 마커 생성 완료!!!!

위의 좌표값은 카카오 본사 위치인데, 만약 원하는 특정 위치나 현위치를 표시하고 싶을 때에는 그에 맞게 좌표값을 구해서 코드에 넣어주면 된다.

이 부분은 뒤에서 정리할 예정이다!!

profile
기초부터 탄탄한 개발자가 되자!💪

0개의 댓글