Vite + React에서 Kakao Maps API 사용하기

카카오맵 API 사용은 키 발급을 받아야 사용할 수 있다.

또한, 키 발급에는 카카오 계정이 필요하다. 아래 과정을 통해 먼저 키를 발급하자.

준비하기

1. 카카오 개발자사이트 접속 및 로그인

2. 내 애플리케이션 클릭

3. 애플리케이션 추가하기 클릭

4. 앱 이름, 회사명 등 필요한 정보 입력/체크 후 저장

5. 플랫폼 - Web 플랫폼 등록 - 저장(Vite dev 서버의 기본 포트는 5173이다.)

기본적인 사용 준비는 완료가 되었다. 참고로, 앱 키는 JavaScript 키를 사용한다.

아래 "시작하기"부터는 Vite와 React를 사용하여, 웹브라우저에 간단한 지도를 띄워본다.

단계별로 하나씩 진행을 해보자.

시작하기

01. 지도를 담을 영역 만들기

가장 먼저, 지도를 담기 위한 영역이 필요하다. 500x400의 크기로 만들어 보자.

<div ref={mapRef} style={{ width: '500px', height: '400px' }}></div>

React에서 지도를 담을 영역의 DOM 참조는 ref를 사용한다.

02. 실제 지도를 그리는 JS API 불러오기

발급 받은 APP KEY는 환경 변수로 관리할 것이기 때문에, root 디렉토리(index.html 파일이 위치한 곳과 같은 레벨)에 .env 파일을 만든다.

# .env 파일
VITE_KAKAO_API="발급 받은 APP KEY"

그리고 index.html에서 스크립트를 불러온다.

<head>
  ...
  <script
    type="text/javascript"
    src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%VITE_KAKAO_API%"
  ></script>
</head>

%ENV_NAME%과 같은 특수한 구문에 대한 내용은 Vite 공식 문서의 아래 글을 통해 확인할 수 있다.

HTML 환경 변수 대체

03. 지도를 띄우는 코드 작성

useEffect(() => {
  const kakao = window.kakao;
  const container = mapRef.current; // 지도를 담을 영역의 DOM 참조

  // 지도를 생성할 때 필요한 기본 옵션
  const options = {
    center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표.
    level: 3, // 지도의 레벨(확대, 축소 정도)
  };

  new kakao.maps.Map(container, options); // 지도 생성 및 객체 리턴
}, []);

여기서 주의할 점은, useEffect를 사용하여 해당 컴포넌트가 DOM에 추가된 이후에 코드가 실행되도록 만드는 것이다.

전체 코드는 아래와 같다.

import { useEffect, useRef } from 'react';

function App() {
  const mapRef = useRef(null);

  useEffect(() => {
    const kakao = window.kakao;
    const container = mapRef.current; // 지도를 담을 영역의 DOM 참조

    // 지도를 생성할 때 필요한 기본 옵션
    const options = {
      center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표.
      level: 3, //
    };

    new kakao.maps.Map(container, options); // 지도 생성 및 객체 리턴
  }, []);

  return (
    <>
      <h1>카카오맵</h1>
      <div ref={mapRef} style={{ width: '500px', height: '400px' }}></div>
    </>
  );
}

export default App;

이제 실행을 해보자. 그럼 웹 브라우저에는 아래와 같이 500x400 크기의 지도가 생성되었을 것이다.

참고

Kakao 지도 Web API 가이드 - Kakao Maps API

저작자표시 비영리 변경금지

'React' 카테고리의 다른 글

CRA에서 Vite로 마이그레이션: 차세대 툴로 개발 환경 개선하기 (0)	2024.02.22
[React] API 응답 시간이 너무 길다면 어떻게 해야 할까? (0)	2023.11.04
React 페이지네이션 UI 직접 만들기 (0)	2023.08.02
React에서 Swiper Element 사용 시 TypeScript 에러 해결하기 (0)	2023.06.18
[React] null vs empty fragment (0)	2023.05.19