Next.js에서 카카오맵 사용하기

Dec 8, 2021

카카오맵 `typescript` 지원

npm i -D @types/kakaomaps

.env

NEXT_PUBLIC_KAKAO_JS_APP_KEY='카카오 JAVASCRIPT 앱 키'

KakaoMap 컴포넌트

import { useCallback, useEffect, useRef } from 'react';
import Head from 'next/head';
import Script from 'next/script';

const NEXT_PUBLIC_KAKAO_JS_APP_KEY = process.env.NEXT_PUBLIC_KAKAO_JS_APP_KEY;

export default function KakaoMap() {
  const containerRef = useRef<HTMLDivElement>(null);

  const initMap = useCallback(() => {
    if (containerRef.current) {
      const map = new kakao.maps.Map(containerRef.current, {
        center: new kakao.maps.LatLng(37.511802140129774, 126.97173595515305),
        level: 3,
      });
    }
  }, []);

  useEffect(() => {
    if (window?.kakao) {
      initMap();
    }
  }, [initMap]);

  return (
    <>
      <Script
        src={`https://dapi.kakao.com/v2/maps/sdk.js?appkey=${NEXT_PUBLIC_KAKAO_JS_APP_KEY}&autoload=false`}
        onLoad={() => kakao.maps.load(initMap)}
      />
      <Head>
        <link rel="preconnect" href="https://dapi.kakao.com" />
        <link rel="dns-prefetch" href="https://dapi.kakao.com" />
      </Head>
      <div ref={containerRef} style={{ width: '100%', height: 500 }} />
    </>
  );
}

이렇게 하는 이유는 useEffect가 onLoad보다 먼저 실행되기 때문이다. 그런데 Script는 최초 한번만 로드되므로 onLoad로만 initMap을 할 수는 없다.
&autoload=false는 js↦document.write를 사용하지 않고 js↦kakao.maps.load(callback)로 모듈을 불러올 수 있도록 하는 쿼리다.

카카오맵 typescript 지원

.env

KakaoMap 컴포넌트

카카오맵 `typescript` 지원