[React] Naver Maps API를 활용한 지도 서비스 구현하기 *마커 커스터마이징 포함!*

Naver Maps API? 그런게 있어?

Naver Maps API는 네이버에서 제공하는 지도 서비스 API이다.

필자가 처음 지도 서비스를 구현하려고 할 때 Google Maps API를 고려했지만, 한국 지도 서비스의 특성상 Naver Maps API가 더 적합하다고 판단했다.

(Naver Maps API는 한글 도로명 주소와 건물명을 더 정확하게 처리할 뿐만 아니라, 국내 위치 기반 서비스에 최적화되어 있다!!)

 

사용하려면 뭘해야 될까? 🤔

먼저 Naver Cloud Platform에서 애플리케이션을 등록하고 Client ID를 발급받아야 한다.

이 과정에서 서비스 도메인을 등록하는데, 개발 환경에서는 localhost도 등록할 수 있다.

(필자는 React에서 사용하는 부분을 정리하고자 하니 Client ID 발급 관련은 다른 블로그를 참고하는게 좋을 것 같다! 아래와 같이 Naver CLOUD PLATFORM에서 확인이 가능!)

<script type="text/javascript"
    src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID">
</script>

이 스크립트는 Naver Maps JavaScript API를 불러오는 코드이고, React 애플리케이션의 index.html에 추가하여 전역적으로 사용할 수 있게 된다.

---

React 프로젝트 설정

필자가 API를 사용하는 부분마다 알려주는 부분이지만 React 프로젝트에서 환경 변수를 사용하여 Client ID를 관리하는 것이 보안상 좋은 방법이다.

env 파일을 생성하고 다음과 같이 설정했다!

REACT_APP_NAVER_CLIENT_ID=your_client_id

index.html에서는 이 환경 변수를 다음과 같이 사용할 수 있다.

<script>
    window.NAVER_CLIENT_ID = '%REACT_APP_NAVER_CLIENT_ID%';
</script>

---

지도 컴포넌트 구현

React에서 Naver Maps를 사용하기 위해 useRef와 useEffect 훅을 활용했다.

useRef는 지도 인스턴스와 마커를 저장하는 데 사용되며, useEffect는 컴포넌트 마운트 시 지도를 초기화하고 선택된 위치가 변경될 때 마커를 업데이트하는 데 사용된다.

const NaverMap = ({ selectedRestaurant }) => {
    const mapRef = useRef(null);
    const markerRef = useRef(null);

    useEffect(() => {
        if (!window.naver) return;

        if (!mapRef.current) {
            mapRef.current = new window.naver.maps.Map('map', {
                center: new window.naver.maps.LatLng(36.01415, 129.3583895),
                zoom: 17,
            });
        }
    }, []);

    return <div id="map" style={{ width: '100%', height: '100%' }} />;
};

이 코드는 지도의 기본적인 초기화를 담당한다.

mapRef를 사용하여 지도 인스턴스를 참조하고, 컴포넌트가 처음 마운트될 때만 지도를 초기화합니다.

---

마커 커스터마이징

Naver Maps API에서는 마커를 HTML 컨텐츠로 커스터마이징할 수 있다.

const marker = new window.naver.maps.Marker({
    position: new window.naver.maps.LatLng(lat, lng),
    map: mapRef.current,
    icon: {
        content: `
            <div style="
                padding: 10px;
                background: #ff6b1a;
                color: white;
                border-radius: 20px;
                font-weight: bold;
            ">
                ${name}
            </div>
        `,
        anchor: new window.naver.maps.Point(0, 0),
    },
    animation: window.naver.maps.Animation.DROP
});

위 코드는 필자가 커스텀한 마커인데 마커에 애니메이션 효과를 추가하고, HTML과 CSS를 사용하여 시각적으로 더 눈에 띄는 디자인을 구현했다!

 

useRef는 리렌더링 사이에 값을 유지하면서도 값 변경 시 리렌더링을 트리거하지 않는다는 특징이 있어, 지도 인스턴스와 같은 무거운 객체를 관리하는 데 매우 적합했다.

 

useEffect를 통한 사이드 이펙트 관리는 지도 초기화와 마커 업데이트와 같은 작업을 컴포넌트의 생명주기와 잘 연동할 수 있게 해준 것 같다!

---

구현 화면