지도 기능은 웹 애플리케이션에서 자주 사용되는 기능 중 하나입니다. 사용자의 위치를 표시하거나 장소를 검색할 수 있는 등 다양한 기능을 제공합니다. 이번에는 Custom Hook을 이용하여 간단한 지도 기능을 추가하는 방법에 대해 알아보겠습니다.

Custom Hook이란?

Custom Hook은 React에서 기본적으로 제공하지 않는 기능을 추가하기 위해 사용하는 개별적인 JavaScript 함수입니다. 이를 사용하여 프로젝트에 필요한 기능을 쉽게 추가하고 관리할 수 있습니다. 우리는 Custom Hook을 사용하여 지도 관련 기능을 구현해보도록 하겠습니다.

react-google-maps 패키지 설치하기

먼저, react-google-maps 패키지를 설치해야 합니다. 이 패키지는 구글 지도 API와 상호작용할 수 있는 컴포넌트를 제공합니다. 아래 명령을 사용하여 패키지를 설치합니다.

npm install react-google-maps

Custom Hook 구현하기

이제 Custom Hook을 구현해보겠습니다. 우리는 useMap을 이름으로 하는 Custom Hook을 생성할 것입니다.

import { useEffect, useState } from 'react';

const useMap = () => {
  const [map, setMap] = useState(null);

  useEffect(() => {
    // 구글 지도 API를 이용하여 지도를 생성하는 로직 작성
    const map = new window.google.maps.Map(document.getElementById('map'), {
      center: { lat: 37.5665, lng: 126.9780 },
      zoom: 10,
    });

    setMap(map);
  }, []);

  return map;
}

export default useMap;

위의 코드는 useMap이라는 Custom Hook을 구현한 예시입니다. useEffect 훅을 사용하여 컴포넌트가 처음 렌더링될 때만 실행되도록 설정하고, 구글 지도 API를 이용하여 지도를 생성한 후 map 상태를 업데이트합니다.

Custom Hook 사용하기

이제 만든 Custom Hook을 사용하여 지도를 렌더링하는 컴포넌트에서 지도를 사용할 수 있습니다. 아래는 예시입니다.

import React from 'react';
import useMap from './useMap';

const MapComponent = () => {
  const map = useMap();

  return (
    <div id="map" style={{ width: '600px', height: '400px' }}></div>
  );
}

export default MapComponent;

위의 코드에서는 useMap 커스텀 훅을 사용하여 map 객체를 가져온 후, id가 “map”인 div 요소 안에 지도를 렌더링하고 있습니다. 이제 해당 컴포넌트를 사용하면 지도가 화면에 표시될 것입니다.

마치며

Custom Hook을 이용하여 지도 기능을 쉽게 추가하는 방법에 대해 알아보았습니다. 이를 통해 지도 기능을 필요로 하는 다양한 프로젝트에서 유용하게 활용할 수 있을 것입니다. 물론, 좀 더 복잡한 지도 기능을 추가하려면 추가적인 로직이 필요할 수도 있습니다. 그러나 Custom Hook을 기반으로 시작하는 것은 좋은 출발점이 될 것입니다.

#react #customhook