리액트 - 카카오 Map API

이번에는 카카오 지도 api에 대한 글이다. 저번에는 네이버를 이용해서 지도 api를 연동하였다.

나의 개인적인 생각이지만, 지도 api에서는 네이버가 1황이라고 생각이 든다. 

다만, 한 가지 단점이 "유료"라는 점이다. 그 점에서 카카오 지도 api는 한 달 30만 회의 호스팅을 무료로 버틸 수 있기에 비용 절감의 측면에서 꽤 매력적이다.

또한, 저번에 했던 네이버 지도 api의 "API 키 오픈" 문제를 어느 정도는 해결한 글이기도 하다. 시작해 보자.

---

카카오 api 키 받기

https://apis.map.kakao.com/

여기로 들어가서 애플리케이션을 등록해줘야 한다. 그러면 api 키를 받을 수 있다. 리액트는 자바스크립트 기반이니깐 자바스크립트 api의 키를 쓰면 된다. (강조한다. api 키는 함부로 노출시키지 말아라.)

애플리케이션 등록하는 방법을 모르면..

https://tlqckd0.tistory.com/43

React에서 kakao map api사용하기

여기 글을 참고해 주면 된다. 참고로 여기에 존재하는 코드가 정말 많은 도움이 되었다.

등록을 할 때에는 바로 메인일시 로컬호스트 3000번을 넣어주면 된다, 그게 아니면 호스트 뒤에 붙은 "이름"까지 넣어줘야 한다. 예를 들어서 "http://localhost:3000/main" ...

그리고 배포했다면, 그 배포한 사이트까지 넣어줘야 한다. 이 부분 까먹지 말고 꼭 넣어주길 바란다.

환경 변수 세팅

https://rominlamp.tistory.com/22

[React] .env 파일로 환경 변수 관리 하기 (Feat. API Key)

이건 이 글을 통해서 정해주면 된다.

.env 파일은 가장 "최상단"에 만들자. 보통 src 밑에 만드는 실수를 저지르니...(그게 접니다) 꼭 확인해 주자.

(env 파일 경로 보면 src > env 이렇게 되어 있으면 잘못 만든 거임... 바로 가장 메인 폴더 밑에 존재해야 한다!)

퍼블릭 폴더 밑의 index.html에 스크립트 삽입

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%여기에 당신이 정한 리액트 환경 변수명을 기입하세요%"></script>

심플하다. 당신의 html 파일 title 밑에 위의 코드를 삽입해 주면 끝이다.

이후 바로 자바스크립트 문법도 작성해서 넣어줄 수는 있지만.. 어차피 리액트에서 jsx으로 지도에 해당되는 컴포넌트를 세팅할 것이니 따로 작성할 필요는 없다. (스타일링도 어차피 css이나 scss 쓸 거 아님??)

참고로 포인트는 "%"이다. 이거 빼먹지 말고 작성해 주자. 

환경 변수명은 무조건 " REACT_APP~~"으로 시작해줘야 한다. 변수의 이름은 본인 마음대로 만들 수 있지만, 최대한 영어 및 대문자로 작성해 주는 것을 추천한다. 띄여쓰기 대신 "_"을 이용해주자. 

카카오 지도 api 실제 문법 작성

자. 문법은 도대체 어떻게 작성이 되는 걸까?

코드를 작성하기 이전에, 일단 npm에 카카오 관련 지도 api를 install해두는 것을 추천한다.

npm install react-kakao-maps-sdk

---

// MapTest.jsx
import React, { useEffect, useState } from 'react';

const { kakao } = window;

const MapTest = () => {
    const [map,setMap] = useState(null);

    //처음 지도 그리기
    useEffect(()=>{
        const container = document.getElementById('map');
        const options = { center: new kakao.maps.LatLng(33.450701, 126.570667) };
        const kakaoMap = new kakao.maps.Map(container, options);
        setMap(kakaoMap);
    },[])

    return (
        <div
            style={{
                width: '100%',
                display: 'inline-block',
                marginLeft: '5px',
                marginRight: '5px',
            }}
        >
            <div id="map" style={{ width: '99%', height: '500px' }}></div>
        </div>
    );
};

export default MapTest;
출처: https://tlqckd0.tistory.com/43 [개발일기장:티스토리]

코드는 위와 같다. 핵심은 useState와 useEffect를 사용하는 것이며, 이후 div의 id에 'map'을 넣어주는 것이다.

스타일링은 태그에 style으로 하지 말고, className를 주어주고 css이나 scss으로 따로 작성해주는 것을 추천한다. 이게 더 자율적이고 활용도도 높으며 재활용도 높다.

이 밖에 확대 스케일이나 지도의 범위를 제한하는 방법도 존재한다. (이건 챗 GPT에게 물어보면 자세하게 알려준다.)

---

마치며

추가로 알아두면 좋은 사이트는 다음과 같다.

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

지도 범위 재설정 하기 | react-kakao-maps-sdk docs

https://xn--yq5bk9r.com/

웹툴.com

 

확실히... api를 이용하는 부분이 가장 어려운 거 같다. 그러나 api를 잘 다루게 된다면, 더 많은 기능과 자유도를 나에게 부여할 수 있음은 분명한 것 같다. 

어차피 핵심적인 로직은 비슷비슷하다. api키를 받고, 그것을 html에 삽입하고, 문법을 작성하며, 틀을 완성하고, 스타일링을 주며, 자바스크립트로 동작을 넣어 생명력을 불어넣는 것. 사실상 이게 프론트의 전부인 거 같다.

지금까지는 "지도"를 넣었지만, 나중엔 로그인이나 주식이나 결제 연동이나 소셜 등등... 정말 많은 기능을 구현할 수 있을 것이다. 기대가 된다.

---

+(11/2) - 환경 변수 및 지도 코드 참고하셈.

https://rominlamp.tistory.com/20

[React] KaKao 지도 API / 카카오맵 사용하기