카카오맵 API

이번에는 카카오맵 API를 사용해서 개인 프로젝트를 업데이트 했다. 카카오맵 API 같은 경우는 한국어기 때문에 문서를 보더라도 매우 쉽게 이해하면서 코드를 작성할 수 있었다.

공식 홈페이지 : https://apis.map.kakao.com/web/guide/
문서: https://apis.map.kakao.com/web/documentation/

이번에 카카오맵을 사용해본 이유는 회사 홈페이지나 개인 홈페이지의 Contact나 About 부분에 사용을 많이 하기 때문에 나 또한 해보았다.

사용해보기

우선, 나는 리액트를 사용하고 있기 때문에 최대한 리액트스럽게 만들어보려했다. 그래서 이번에도 custom Hook을 만들었다. 그리고 Map이라는 컴포넌트를 만들어서 사용했다.

결과

우선 결과부터 보면 꽤나 만족스럽게 사용되었다. 어찌어찌 하다보니 Contact 부분을 계속하고 있는데 이제 꽤나 그럴싸한 개인 홈페이지가 만들어 지고 있는 것 같다.

코드

useFetchMap.js

import { useEffect, useRef } from "react";

const { kakao } = window;

const useFetchMap = (latitude, longitude) => {
  const container = useRef(null);

  useEffect(() => {
    kakao.maps.load(() => {
      const center = new kakao.maps.LatLng(latitude, longitude);
      const options = {
        center,
        level: 4,
      };
      const map = new kakao.maps.Map(container.current, options);

      const markerPosition  = new kakao.maps.LatLng(latitude, longitude); 

      const marker = new kakao.maps.Marker({
          position: markerPosition
      });

      marker.setMap(map);
    });
  }, [latitude, longitude]);

  return { container };
};

export default useFetchMap;

코드는 위와 같다. 우선 전역 객체 kakao다. 이 객체는 window 에서 가져오고 카카오맵 API에서 제공하는 기능을 포함하고 있다.

다음으로 useFetchMap 함수는 경위선을 매개변수로 받는다. 그리고 useRef를 사용해서 지도를 렌더링할 DOM 요소에 대한 참조(ref)를 생성한다. 처음에는 null로 아무것도 참조하지 않는다.

useRef란? 바닐라 자바스크립트에서 특정 DOM 을 선택하기 위해서 querySelector 등의 함수를 사용하듯이, React에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 필요할 때 useRef Hook 함수를 사용한다.

마지막으로 useEffect를 사용하여 컴포넌트가 마운트되거나 위도 또는 경도가 변경될 때마다 지도를 생성한다. 나머지 안에 있는 코드는 문서에서 빼껴온 것이다.

마지막으로 Map이 들어있는 container를 반환하면 끝이다.

Map.jsx

import React from "react";
import useFetchMap from "../../../hooks/useFetchMap";

const lat = 위도;
const lon = 경도;

const Map = () => {
  const { container } = useFetchMap(lat, lon);

  return (
    <div
      ref={container}
      style={{ width: "1265px", height: "350px", border: "1px solid black" }}
    />
  );
};

export default Map;

마지막으로 Map 컴포넌트에서 useFetchMap 함수를 가져와 위도와 경도를 넣어주고, div에 참조할 수 있게 하면 끝난다. 그러면 결과 이미지처럼 Map이 나온다.

정리하기

이번에는 카카오맵 API를 이용해서 웹 페이지에 맵을 띄워봤다. 문서가 잘되어 있어서 어렵지는 않았다.

API를 잘 다룰 줄 아는 개발자가 좋은 점수를 얻을 수 있다는 얘기를 듣고 매일 하나씩 API를 다뤄보려고 하고, 내 개인 페이지에 적용도 해보려 한다. 아직은 미숙하고 찾아보기도 많이 찾아보지만 괜찮은 한 걸음을 걷고 있다고 생각한다.

다음에는 어떤 API를 사용해보고, 내 페이지에 적용해볼까.