[React] map kakao 구현

강수정·2025년 3월 3일

map

목록 보기

1/1

⚙ Kakao Map sdk ver 업데이트 (2024.12.01 ~)

https://devtalk.kakao.com/t/api/140875

[업데이트 내용] 활성화 설정 변경
: 앱권한신청 승인되야 API 사용 가능

📍개요

kakaomap을 라이브러리 이용하여 API 생성

지도 옵션 도시 목록 동적 렌더링 이후 시/도 선택 시, 해당하는 구나 동을 불러와 2단계 드롭다운 구현

선택한 지역에 따라 지도가 해당 위치로 이동하도록 로직 연결

사용자가 직접 주소나 지역명을 검색할 수 있는 input제공

[추가사항] 해당 지역에 매장이 없는경우 제일 가까운 거리의 매장추천

🧐prototype

🔥구현목표

이번시간엔 KAKAO MAP을 이용하여 API를 생성하여 컴포넌트를 띄우는 부분을 구현해보고자 한다.

KAKAO API SETTING

https://developers.kakao.com/
접속하여 등록한뒤 사용이 가능하다.

내 애플리케이션 > 애플리케이션 추가하기

애플리케이션 정보 등록하기 (앱이름, 회사명)

플랫폼설정 (방금 생성한 애플리케이션을 클릭한뒤 들어감)

테스트할 도메인 번호 설정
(리액트 기본 호스트 번호인 localhost:3000 으로 설정)

기본적인 셋팅은 끝났다. 이제 지도 API를 가져오는 로직을
Kakao.js 라는 컴포넌트를 생성하여 로직을 작성하고자 한다.

Kakao API 연결

생성한 API와 프로젝트를 연결해보자

앱으로 돌아가 javascript키 복사

.env 파일속에 APP KEY 암호화 하여 저장

.env 파일 Git에 올라가지 않도록 .gitignore에 추가

public > Index.html
아래 코드에서 javascript 코드를 수정한뒤 카카오 지도 API를 불러오는 script 코드를 <head> 태그 안쪽에 작성한다.

나는 REACT_APP_KAKAOMAP_KEY로 설정하였기 때문에 따로 코드를 수정할 필요 없다.

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

Kakao 지도 띄우기

API setting 이 끝났다.
이제본격적으로 지도를 띄우는 코드를 작성하고자한다.

react-kakao-maps-sdk 라이브러리 설치
카카오맵을 컴포넌트형태로 사용하기위해 해당 라이브러리를 설치
npm install react-kakao-maps-sdk

kakao.js

설치한 라이브러리를 import 해온뒤 해당 Map으로 컴포넌트를 생성하고, stlye 및 위도와 경도를 설정하면 끝!

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

export default function Kakao() {
    return (
        <Map
            center={{ lat: 33.450701, lng: 126.570667 }}
            style={{ width: '300px', height: '500px' }}
            level={3}
        />
    );
}

[추가내용] API 활성화 설정

[내 애플리케이션] -> [앱권한 신청] -> 바로가기 -> [카카오맵]

공식문서로 했는데도 지도가 안띄워지고 403에러가 계속해서 발생하여 삽질을 계속했다. 알고보니 API호출 부분이 2024.12.1 이후 수정된 부분이있었다 해당사항을 수정하고나니 잘 처리됨

🌹 react-kakao-maps-sdk 참고

https://react-kakao-maps-sdk.jaeseokim.dev/docs/sample/map/basicMap/

강수정