728x90
반응형
https://apis.map.kakao.com/web/
1. 토큰발급 후 : Guide > 지도를 띄우는 코드 작성 > 전체 코드 확인 ( 필요에 맞게 수정해서 사용)
<script
type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급한 app key를 넣으시면 됩니다."
></script>
1) sript태그는 index.html 부분에 추가하였음
const {kakao} = window;
2) kakao 객체를 사용하기 위해, window 객체로부터 스크립트에서 로드한 kakao api를 가져와야하기에 상단에 작성
useEffect(() => {
const container = document.getElementById('map');
const option = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 3,
};
const map = new kakao.maps.Map(container, option);
}, []);
3) useEffect에 넣어서 사용
[전체 코드 : map.jsx]
import React from 'react';
const {kakao} = window;
function Map() {
useEffect(() => {
const container = document.getElementById('map');
const option = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 3,
};
const map = new kakao.maps.Map(container, option);
}, []);
return (
<div>
<map id="map" style={{width: '100%', height: '100%'}}></map>
</ div >
);
}
return 문 안에서 import해서 사용
<Map>지도</Map>
음..! 지도는 나오는데 그 이후에 어떻게 해야할지 감이 안 잡힌다..!
조금 더 생각해봐야겠음..
반응형
'TIL :: Today I Learned' 카테고리의 다른 글
리액트 : Modal 모달 팝업 외부 영역 클릭시 닫기 기능 + 배경 스크롤 막기 (0) | 2023.12.11 |
---|---|
리액트 : 파이어베이스 데이터 저장 후 홈 화면 리랜더링하기 (0) | 2023.12.11 |
리액트 : 아웃소싱 프로젝트 기획 (1) | 2023.12.05 |
#01 React와 Firebase로 구현하는 로그인 및 게시글 작성 (0) | 2023.11.23 |
리액트 : Modal 모달 팝업 만들기 (+ Div태그 contentEditable : 이미지 넣기) (0) | 2023.11.22 |