[React] 주소로 지도 표시하기 (with 카카오 지도 API)

내 주소를 입력하면 지도로 표시하기 위해 카카오 지도 API를 이용해보았다!

구현할 UI - 오른쪽 위 지도 부분

📄 카카오 지도 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/

Hello from react-kakao-maps-sdk docs | react-kakao-maps-sdk docs

튜토리얼부터 카카오 지도 API 에 있는 일부 샘플들도 문서화가 잘 되어있다.

 

⚒️ 설치

npm install react-kakao-maps-sdk

🔑 KaKao API 키 발급 및 설정하기

카카오 지도 API를 사용하기 위해서는 Kakao Developers에서 API 키를 발급 받아야한다.

 

https://developers.kakao.com/

Kakao Developers

 

발급 방법 🔽

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

카카오맵 API를 리액트스럽게 사용해보자

 

💡 참고

https://velog.io/@riley_dev/React-vite%EC%97%90%EC%84%9C-%ED%99%98%EA%B2%BD%EB%B3%80%EC%88%98-.env-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0

[React] vite에서 환경변수 .env 설정하기

 

https://velog.io/@hahbr88/React-index.html%EC%97%90-%ED%99%98%EA%B2%BD%EB%B3%80%EC%88%98-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0

React : index.html에 환경변수 적용하기