Next 카카오 맵 구현

 

카카오맵 구현 📖

먼저 `react-kakao-maps-sdk`를 설치해 줍니다.

npm i react-kakao-maps-sdk

 

useKakaoLoader

이후 `useKakaoLoader`를 작성해주고 export 해줍니다.

// useKakaoLoader.ts

import { useKakaoLoader as useKakaoLoaderOrigin } from "react-kakao-maps-sdk";

const KAKAO_API_KEY = process.env.NEXT_PUBLIC_KAKAO_API_KEY;

export default function useKakaoLoader() {
  useKakaoLoaderOrigin({
    appkey: `${KAKAO_API_KEY}`,
    libraries: ["clusterer", "drawing", "services"],
  });
}

 

page

지도를 보여줄 페이지에서 Loader를 호출하고 `<Map/>`을 사용해 지도를 화면에 보여줍니다.

// app > kakao-map > page.tsx
"use client";

import useKakaoLoader from "@/hooks/useKakaoLoader";
import { Map } from "react-kakao-maps-sdk";

const KakaoMapPage = () => {
  useKakaoLoader();

  return (
    <Map
      id="map"
      center={{
        lat: 35.90701,
        lng: 127.570667,
      }}
      className="w-[100vw] h-[100vh] relative"
      level={12}
    >
    </Map>
  );
};

export default KakaoMapPage;

 

지도가 잘 나오는 걸 확인할 수 있습니다!

지도