내 리액트 프로젝트에 카카오맵 오픈API 사용하기

voyager 999·2024년 2월 29일

목록 보기

26/27

이번 팀프로젝트도 기한 내에 멋드러지게 완료하여 제출하기 성공:] ...한 기념으로 카카오맵 오픈API를 사용하는 방법에 대해 간략하게 작성해보려고 한다.

카카오 Developers 계정만들기

1. 카카오 디펠로퍼스에서 새로운 계정을 만든다. Kakao Developers

2. 애플리케이션을 추가한다.
3. 앱 아이콘 등록하지 않아도 진행 가능하다. 앱이름에 프로젝트 이름을 넣어주고, 사업자명은 그냥 우리 팀 이름을 입력해줬다.
4. API가 아무데서나 막 사용되지 않도록 플랫폼 설정을 해준다. 사이트 주소를 입력하면 되는데, 아직 배포하지 않은 프로젝트라면 localhost:3000 설정도 가능하다. 여러 개의 주소를 등록할 수 있으니 나중에 배포하고 나면 배포 주소, 도메인 주소를 입력하면 좋겠다.

프로젝트에 카카오API 셋팅하기

1. 4가지 API키를 .env파일에 환경변수로 선언해준다.
요렇게 선언해 주면 export 해줄 필요 없이 다른 곳에서 변수 이름으로 불러와서 사용할 수 있다.
2. public/index.html에 API 스크립트를 넣어준다. 카카오맵스API 공식문서
구글링하다보니 Head태그 안에 넣어야한다는 걸 어디서 본 것 같아서 나도 Head 태그 끝부분에 넣어주었다. 아까 갖고왔던 4가지 키 중에서 자바스크립트 키를 여기 appkey 부분에 넣어주면 된다.

처음에는 process.env 이런식으로 넣었었는데, 여기서는 그렇게 넣으면 안되고 %환경변수명% 요렇게 넣어줘야 한다는 점! 기본 지도 기능 이외에 클러스터러와 같은 다른 라이브러리를 사용할 예정이라면 appkey 뒷부분에 &libraries= 요렇게 추가해주면 된다.

3. 앗차차 그리고 프로젝트에 카카오맵 패키지를 설치해주어야 한다.

npm install react-kakao-maps-sdk
yarn add react-kakao-maps-sdk

원하는 컴포넌트에서 카카오맵 띄우기

가장 기본적인 맵을 띄우는 방법이다. 아래 코드는 다음과 같이 크게 3가지 내용을 담고 있다. (1)처음 렌더링 시 지도 중심 좌표 설정 (2)지도 영역의 크기 (3)지도의 확대 레벨

import { Map } from "react-kakao-maps-sdk"
import useKakaoLoader from "./useKakaoLoader"

export default function BasicMap() {
  useKakaoLoader()

  return (
    <Map // 지도를 표시할 Container
      id="map"
      center={{
        // 지도의 중심좌표
        lat: 33.450701,
        lng: 126.570667,
      }}
      style={{
        // 지도의 크기
        width: "100%",
        height: "350px",
      }}
      level={3} // 지도의 확대 레벨
    />
  )
}

이제 여기까지 되었다면, 프로젝트의 기획에 따라 원하는 기능을 필요한만큼 더 추가하면 된다.

예를 들어 이번 우리 프로젝트의 detail 페이지에 사용된 코드이다.