Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
이번에는 react에서 카카오맵 API를 통해 지도를 가져오는 것을 해볼 것이다.
완성된 페이지를보자
이런식으로 잘불러올수있다.
우선 카카오디벨로퍼에 가입되어있다 가정하고 진행하겠다.
코드를 하나하나 살펴보자 저기 홈페이지 가이드라인을 따라하면 안된다. 기존코드를 보자
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kakao 지도 시작하기</title>
</head>
<body>
<div id="map" style="width:500px;height:400px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>
<script>
var container = document.getElementById('map');
var options = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 3
};
var map = new kakao.maps.Map(container, options);
</script>
</body>
</html>이것이 기존 카카오에서 제공하는 코드이다. 저기 발급받은 APP KEY값은 카카오지도 API를 신청하면 본인의 고유 키값을 발급해준다. 거기서 앱키에서 JavaScript키값을 복사해서 넣으면된다. 이제 우리는 이것을 react에 끼워맞춰야??한다.
Map.js라고 파일을만들어주고, 전체 코드를 살펴보자.
import React from 'react';
import styled from "styled-components";
/*global kakao*/
class Map extends React.Component{
componentDidMount() {
const script = document.createElement("script");
script.async = true;
script.src =
"https://dapi.kakao.com/v2/maps/sdk.js?appkey=본인 API키값&libraries=LIBRARY";
document.head.appendChild(script);
script.onload = () => {
kakao.maps.load(() => {
let container = document.getElementById("map");
let options = {
center: new kakao.maps.LatLng(37.506502, 127.053617),
level: 7
};
const map = new window.kakao.maps.Map(container, options);
});
};
}
render(){
return(
<>
<Maps id="map">
</Maps>
</>
)
}
}
const Maps = styled.div`
width: 400px;
height: 400px;
margin : 100px 100px 0 130%;
`;
// const Head = styled.h1`
// text-align: center;
// `
export default Map;react에 맞춰서 변경해줘야한다. 뭔가 다른점이 보이는가?
react에서 componentDidMount()를 사용하겠다. componentDidMount는 컴포넌트가 render된 직후 바로 실행된다. 여기서는 외부라이브러리 연동, Ajax, GraphQL, axios 등 컴포넌트에 필요한 데이터 요청, 스크롤 설정 등의 DOM에 관련된 작업을 수행한다.
코드를보면 script를 선언해서 Element를 생성한다. 이제 API를 가져오려고 링크를 연결시킨다. 그리고 기존에 제공하는 코드를 사용해보자.
options 함수를 지우면안된다. 위도,경도 확대레벨 을 설정해주는 것이다. 다 설정해주었으면, 지도를 띄워야한다. 기존코드에서는 style을 바로 적용시킬 수 있지만 react에서는 따로 선언해주거나 css파일을 만들어 className을 사용해야한다. 필자는 styled-components을 사용하겠다. 설정하지않으면 지도가 나타나지않는다. 이렇게 해주면 설정은 완료된다.
/*global kakao*/
Map.js에 상단부분에 추가해놓자. 추가하지않으면 kakao가 선언되어있지않다고 오류를 던진다.
이런 식으로 오류가 나온다.
이제 마지막으로
index.html에 <head>부분에
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=본인API키값"></script>
<title>apple's pick</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
사용한 스크립트를 선언해주면된다. 끝!
'혼자 공부하는 것들 > react' 카테고리의 다른 글
| react 페이지 이동하기 react-router-dom사용 (2) | 2020.11.13 |
|---|---|
| react 파일구조를 어떻게 구성해야할까? (0) | 2020.11.10 |
| react 개발환경세팅 (+MAC OS) (1) | 2020.11.09 |
댓글