Next.js 에서 카카오맵 가장 깔끔하게 사용하기

Next.js는 index.html을 제공하지 않기에 Next.js에서 카카오맵을 사용하기 위해서는 React에는 별로 어울리지 않는 DOM을 직접 조작하는, 명령형 프로그래밍이 필요했습니다[1]. 그러나, react-kakao-maps-sdk 를 사용하면 선언적 프로그래밍으로만 카카오맵을 사용할 수 있습니다.

react-kakao-maps-sdk GitHub
Tutorial과 API에 대한 설명도 잘 되어 있습니다. 예제들도 풍부합니다. react-native-maps 를 사용하던 느낌과 무척 흡사합니다.

먼저 react-kakao-maps-sdk 를 next.js 프로젝트에 추가합니다

npm i react-kakao-maps-sdk
or
yarn add react-kakao-maps-sdk

components/KakaoMap.tsx 파일을 다음과 같이 생성합니다.

import Script from 'next/script';
import { Map } from 'react-kakao-maps-sdk';

const KAKAO_SDK_URL = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${NEXT_PUBLIC_KAKAO_APP_JS_KEY}&autoload=false`;

const KakaoMap = () => {
  return (
    <>
      <Script src={KAKAO_SDK_URL} strategy="beforeInteractive" />
      <Map center={{ lat: 33.450701, lng: 126.570667 }} style={{ width: '100%', height: '100%' }}>
      </Map>
    </>
  );
};

export default KakaoMap;

중요한 포인트는 다음 2가지 입니다:

• KAKAO_SDK_URL에 반드시 autoload=false를 추가해야 합니다. 만약 이 파라미터를 생략하거나 true 값을 주게 되면, kakao.maps 제대로 로딩하지 못하게 되어
  TypeError: kakao.maps.LatLng is not a constructor 오류가 발생합니다.
• Script 컴포넌트의 strategy prop의 값을 beforeInteractive로 지정해주어야 합니다. (next/script의 strategy 참고)

pages/index.tsx에서는 KakaoMap을 임포트하여 사용하면 됩니다.

import type { NextPage } from 'next';
import KakaoMap from 'components/KakaoMap';

const Home: NextPage = () => {
  return (
    <div className="flex ">
      <main className="absolute w-screen h-screen left-0 top-0">
        <KakaoMap />
      </main>
    </div>
  );
};

export default Home;

이제 Map, MapMarker, Circle, Polygon 등 다양한 리액트 컴포넌트를 활용하여 카카오맵을 꾸밀 수 있습니다.

References

[1] React로 Kakao Map 띄우기
[2] https://react-kakao-maps-sdk.jaeseokim.dev/