내 주소를 입력하면 지도로 표시하기 위해 카카오 지도 API를 이용해보았다!
📄 카카오 지도 API 공식문서
https://apis.map.kakao.com/web/
개발 문서도 잘 정리되어 있고, 1일 30만회까지 요청도 가능해서 선택하게 되었다.
여기도 마찬가지로 javascript로 사용 시 위의 공식 문서의 예제 등을 통해 쉽게 사용 가능하다.
하지만 나는 리액트 환경이고
리액트에서 간편하게 이용 가능한 라이브러리 react-kakao-maps-sdk로 리액트 환경에 맞게 컴포넌트를 완성할 수 있었다 ㅎ.ㅎ
🔗 react-kakao-maps-sdk 라이브러리 공식 문서
https://react-kakao-maps-sdk.jaeseokim.dev/
튜토리얼부터 카카오 지도 API 에 있는 일부 샘플들도 문서화가 잘 되어있다.
⚒️ 설치
npm install react-kakao-maps-sdk
🔑 KaKao API 키 발급 및 설정하기
카카오 지도 API를 사용하기 위해서는 Kakao Developers에서 API 키를 발급 받아야한다.
발급 방법 🔽
1. 어플리케이션 등록하기
2. 애플리케이션 > 앱 설정 > 플랫폼 에서 사이트 도메인 등록하기 (아직 배포 전이어서 localhost로 등록하였다.)
3. 앱 키 > JavaScript 키 복사
발급 받은 API 키는 노출이 되지 않아야 하므로 .env를 이용하여 관리한다.
1. 프로젝트 폴더 최상단에 .env 파일을 생성한 후 발급받은 API키를 환경변수로 설정한다.
나는 vite 환경이기 때문에 VITE_ ~~~로 이름을 붙여주었다.
.env를 .gitignore에 추가하여 git에 올라가지 않게 해준다.
3. index.html에 아래 코드를 삽입하여 환경변수를 적용해준다.
<script
type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%VITE_~~~%&libraries=services,clusterer"
></script>
이제 카카오 지도 API를 사용할 준비가 끝났다.
💖 사용하기
먼저 이전에 입력받았던 주소를 useState로 관리, props로 컴포넌트 간 전달하였다.
<구조>
App.jsx의 address
➡️ AddressInput 컴포넌트 : 주소를 입력받고 setAddress로 설정, address 출력
➡️ KaKaoMap 컴포넌트 : 전달받은 address로 좌표를 검색하고 지도에 반영
전체 코드 🔽
App.jsx
import "./App.css";
import AddressInput from "~/components/Input/AddressInput";
import KakaoMap from "~/components/Map/KakaoMap";
import { useState } from "react";
function App() {
const [address, setAddress] = useState("");
return (
<div className="flex h-screen w-screen">
<div className="flex w-2/5 flex-col">
<AddressInput address={address} setAddress={setAddress} />
<div className="h-5/6 bg-yellow-400">정비소 리스트</div>
</div>
<div className="flex w-3/5 flex-col">
<div className="h-2">
<KakaoMap address={address} />
</div>
<div className="h-1/5 bg-blue-400">카센터 상세 정보</div>
<div className="h-2/5 bg-pink-400">블로그 리스트</div>
</div>
</div>
);
}
export default App;
AddressInput.jsx
import React, { useState } from "react";
import { useDaumPostcodePopup } from "react-daum-postcode";
import { FaMapMarkerAlt } from "react-icons/fa";
import { IoSearchSharp } from "react-icons/io5";
export default function AddressInput({ address, setAddress }) {
const open = useDaumPostcodePopup();
const handleComplete = (data) => {
let fullAddress = data.address;
let extraAddress = "";
if (data.addressType === "R") {
if (data.bname !== "") {
extraAddress += data.bname;
}
if (data.buildingName !== "") {
extraAddress +=
extraAddress !== "" ? `, ${data.buildingName}` : data.buildingName;
}
fullAddress += extraAddress !== "" ? ` (${extraAddress})` : "";
}
setAddress(fullAddress);
};
const handleClick = () => {
open({ onComplete: handleComplete });
};
return (
<div className="h-auto bg-stone-200">
<div className="flex-col content-center items-center p-5">
<div
className="flex justify-between bg-white py-3 hover:cursor-text"
onClick={handleClick}
>
<p className="mx-5 text-lg text-stone-300">내 주소 입력</p>
<IoSearchSharp
color="lightgray"
size={30}
className="mx-5 hover:cursor-pointer"
/>
</div>
<>
{address === "" ? (
<></>
) : (
<div className="mt-5 flex items-center gap-3 text-xl font-bold text-black">
<FaMapMarkerAlt size={25} />
<p>{address}</p>
</div>
)}
</>
</div>
</div>
);
}
KaKaoMap.jsx
https://apis.map.kakao.com/web/sample/addr2coord/
공식문서의 '주소로 장소 표시' 샘플 코드를 이용하였다.
import { useEffect, useState } from "react";
import { Map } from "react-kakao-maps-sdk";
export default function KakaoMap({ address }) {
const [map, setMap] = useState();
useEffect(() => {
if (!map) return;
// 주소-좌표 변환 객체를 생성합니다
const geocoder = new kakao.maps.services.Geocoder();
// 주소로 좌표를 검색합니다
geocoder.addressSearch(address, (result, status) => {
if (status === kakao.maps.services.Status.OK) {
const coords = new kakao.maps.LatLng(result[0].y, result[0].x);
// 결과값으로 받은 위치를 마커로 표시합니다
new kakao.maps.Marker({
map: map,
position: coords,
});
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
map.setCenter(coords);
}
});
}, [address, map]);
return (
<Map // 로드뷰를 표시할 Container
center={{
lat: 37.566826,
lng: 126.9786567,
}}
style={{
width: "100%",
height: "350px",
}}
level={3}
onCreate={setMap}
></Map>
);
}
🖼️ 결과물
👩🏻💻 추가로 할 것
- 리액트 sdk를 설치하였지만 이를 활용하기보단 공식 문서 그대로 활용했다. 이를 sdk를 활용해서 변경해볼 것이다.
https://nukw0n-dev.tistory.com/31
💡 참고
'라이브러리 > React' 카테고리의 다른 글
[React] 주소 검색 & 출력하기 (with 다음 주소 API 라이브러리) (0) | 2024.05.28 |
---|---|
React + Vite 환경에서 TailwindCSS 설치하기 (0) | 2024.05.27 |
[React] 프로젝트 환경 세팅하기 - CRA vs Vite (0) | 2024.05.08 |