React Hooks / 리액트 훅스로 구글맵 API 초간단하게 적용해보자!

리액트 훅스 버전으로 구글 맵을 띄워보는 작업을 해보겠습니다!

 

 

 

1. 1. Google Maps API 발급하기

 

 

구글 맵스 플랫폼 사이트에 접속합니다

 

cloud.google.com/maps-platform/?hl=ko

Geolocation API  |  Google Maps Platform  |  Google Cloud

 

 

 

"시작하기" 버튼을 클릭합니다

 

 

 

 

 

다음 결제 항목에서 안내하는 대로 입력합니다.

자동 결제와 같이 추후에 돈이 빠지는 일은 없으니 걱정하지 마시고 진행하시면 됩니다

 

 

"사용자 인증 정보" 항목을 클릭하면 발급된 키를 확인할 수 있습니다

 

 

 

 

 

2. 2. 코드에 적용해서 맵 띄우기

 

이제 본격적으로 공식 문서의 순수 Javascript 절차와 비교하면서 코드를 작성하여 맵을 띄우는 작업을 해보겠습니다!

 

 

(1) Google Maps API 불러오기

 

index.html 에서 head에서 API를 불러오는 script 코드를 삽입합니다

YOUR_API_KEY 부분은 발급받은 키로 수정합니다

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>HTML

 

 

(2) 코드 react hooks로 수정하기

 

📌 JavaScript

 

공식 문서 (developers.google.com/maps/documentation/javascript/overview?hl=ko#maps_map_simple-javascript) 참고

공식 문서에 제공되는 JavaScript 코드입니다 참고해서 비교해보세요!

 

 

 

📌React Hooks

 

 

import React, { useCallback, useEffect, useRef } from "react";

function Home() {
  const mapRef = useRef(null);

  const initMap = useCallback(() => {
    new window.google.maps.Map(mapRef.current, {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8,
    });
  }, [mapRef]);

  useEffect(() => {
    initMap();
  }, [initMap]);

  return (
    <div
      className="map"
      style={{ width: "500px", height: "500px" }}
      ref={mapRef}
    ></div>
  );
}

export default Home;JAVASCRIPT

 

∙ 수정된 코드 리뷰

 

center와 zoom는 필요한 default 값입니다

JavaScript에서 getElementById는 useRef로 대체합니다

google 객체 앞에 추가로 window 객체를 추가 선언해주어야 합니다

useEffect를 통하여 처음 실행될 때 맵이 띄워지도록 설정합니다

 

 

여기까지 완성하면 맵이 정상적으로 구현된 것을 보실 수 있습니다!