frontendreact

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

kakaomap, next, react
Views: 491

시작하기

지도를 표시해주는 어플리케이션을 만들기 위해서는 맵이 필요한데 많은 api중에 카카오 맵 오픈소스api를 사용해보도록 하겠습니다.

개발자계정 로그인

카카오맵 개발자 사이트에 접속해서 로그인을 해줍니다.

개발자 홈
로그인후 내 어플리케이션을 선택합니다.

어플리케이션 추가
어플리케이션을 추가해주도록합니다.

대시보드
추가한 어플리케이션을 선택하면 대시보드가 나옵니다.

플랫폼
좌측의 플랫폼을 선택합니다.

하단에 web 플랫폼을 등록합니다.
url을 입력할시 다음과 같은 방법으로 입력합니다.
끝에 /를 붙이지 않고 엔터로 다음줄에 여러 개의 url을 입력할수 있습니다.
등록

예시)

1
2
http://localhost:3000
http://localhost

이것으로 기본준비는 완료되었습니다.

next js에 적용하기

kakaomap을 사용하기 위해서는 앱키가 필요합니다.
대시보드에서 앱키를 선택한이후 JavaScript 키를 복사합니다.
앱키

pages/_document.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//... import
export default class MyDocument extends Document<Props> {
  //...
  render() {
    const kakaoKey = "복사한 API키 붙여넣기";
    return (
      <html lang="ko">
        <Head>
          <script
            type="text/javascript"
            src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${kakaoKey}&libraries=services`}
          />
          //... head 코드
        </Head>
        <body>//... body 코드</body>
      </html>
    );
  }
}
//...

_document.tsx의 Head부분에 script를 추가해주도록 합니다.
이제 사용 할 준비가 되었습니다.

두가지 파일을 만들겠습니다.

pages/map.tsx - page
src/KakaomapComponent.tsx - kakaomap component

pages/map.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import React, { useEffect } from "react";
import KakaomapComponent from "src/KakaomapComponent";

const Map: React.FC = () => {
  const kakaoMap = React.useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (kakaoMap && kakaoMap.current) {
      const x = 126.570667;
      const y = 33.450701;
      const coords = new (window as any).daum.maps.LatLng(y, x); // 지도의 중심좌표
      const options = {
        center: coords,
        level: 2,
      };
      const map = new (window as any).daum.maps.Map(kakaoMap.current, options);
      const marker = new (window as any).daum.maps.Marker({
        position: coords,
        map,
      });
      // 맵의 중앙으로 이동
      map.relayout();
      map.setCenter(coords);
      // 마커를 중앙으로 이동
      marker.setPosition(coords);

      // 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다
      const mapTypeControl = new (window as any).daum.maps.MapTypeControl();

      // 지도에 컨트롤을 추가해야 지도위에 표시됩니다
      // kakao.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
      map.addControl(
        mapTypeControl,
        (window as any).kakao.maps.ControlPosition.TOPRIGHT
      );
      // 지도 확대 축소를 제어할 수 있는  줌 컨트롤을 생성합니다
      const zoomControl = new (window as any).daum.maps.ZoomControl();
      map.addControl(
        zoomControl,
        (window as any).daum.maps.ControlPosition.RIGHT
      );
    }
  }, [kakaoMap]);
  return <KakaomapComponent ref={kakaoMap} />;
};

export default Map;

import KakaomapComponent from 'src/KakaomapComponent';
절대경로를 사용해주었습니다. next js에서 설정이 안되어 있다면 Nextjs typescript 절대경로 설정하기 포스트를 참고해주세요.

src/KakaomapComponent
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React, { forwardRef, Ref } from "react";

type KakaomapComponentProps = {
  ref: Ref<HTMLDivElement>;
};
const KakaomapComponent: React.FC<KakaomapComponentProps> = forwardRef(
  (props, ref) => {
    return (
      <div style={{ width: "400px", height: "300px" }}>
        <div ref={ref} style={{ width: "100%", height: "100%" }} />
      </div>
    );
  }
);

export default KakaomapComponent;

kakaomap을 보여줄 영역을 선택하기 위해서 Ref를 사용했습니다 forwardRef에 대해서는 React Ref사용하기 포스트를 참고 해주세요.

결과물

결과물

이것으로 카카오맵 오픈소스를 이용해서 지도를 사용해보았습니다.

Share