React와 Vite를 이용한 Kakao 지도 API 연동하기

React와 Vite를 이용해 Kakao 지도 API를 연동하는 방법을 알아보겠습니다.

1. 필요한 패키지 설치

Kakao 지도를 React에서 쉽게 사용할 수 있도록 react-kakao-maps-sdk 라이브러리를 설치합니다.

pnpm install react-kakao-maps-sdk

2. Kakao 지도 API 설정

Kakao API를 사용하려면 앱 키가 필요합니다.

Kakao 개발자 사이트에서 로그인 후 애플리케이션을 생성합니다.
JavaScript 키를 확인하고 .env 파일에 저장한다.

.env 파일 생성 후 다음 내용을 추가:

VITE_KAKAO_APP_KEY=YOUR_JAVASCRIPT_KEY

⚠️ .env 파일은 .gitignore에 추가하여 보안 유지를 해야 합니다.

개발자 모드에서 확인해보니 굳이....?긴 했습니다. html 파일에서 그대로 확인할 수 있었습니다.

3. Kakao 지도 API 스크립트 추가

index.html에 Kakao 지도 API를 추가합니다.

<script
  type="text/javascript"
  src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%VITE_KAKAO_APP_KEY%&libraries=services,clusterer"
></script>

Vite에서는 환경 변수는 VITE_로 시작해야 정상적으로 인식됩니다.

4. KakaoMap 컴포넌트 생성

import React from 'react';
import { Map } from 'react-kakao-maps-sdk';

const KakaoMap = ({ width, height }) => {
  return (
    <Map
      center={{ lat: 33.450701, lng: 126.570667 }}
      style={{ width: `${width}`, height: `${height}` }}
      level={3}
    />
  );
};

export default KakaoMap;

위 코드에서는 react-kakao-maps-sdk의 Map 컴포넌트를 사용하여 기본적인 지도를 표시합니다.

5. KakaoMap 컴포넌트 활용

import React from 'react';
import KakaoMap from '../components/KakaoMap/KakaoMap';

const ProductList = () => {
  return (
    <div className='flex w-full'>
      <div className='w-[25%] bg-accent'>
        검색
      </div>
      <div className='w-[75%]'>
        <span className='text-2xl'>지금 우리 동네 인기 매물 TOP 20</span>
        <KakaoMap width={'916px'} height={'640px'} />
      </div>
    </div>
  );
};

export default ProductList;

처음에는 KakaoMap 컴포넌트가 제대로 불러와지지 않아 당황했지만, 캐시를 삭제하고 나니 정상적으로 표시되었습니다.

하지만 덕분에 팀원에게 강력한 새로고침 방법을 배우는 좋은 경험이 되었습니다!

FrontEnd-Dev