REACT | NAVER Cloud Platform 네이버 지도 API 활용하기

지난 프로젝트에서 API를 활용했던 부분을 정리하려고 한다.

 

리액트 환경에서 네이버 지도 API를 불러와서 보여주고

몇몇 좌표에 마커를 찍어 보여주는 기능을 개발했다.

 

일단 네이버 지도를 불러오는 기본 코드는

NAVER Maps API v3

공식 사이트에 나와있는 예시 코드를 참고했다.

 

내 코드

import React, { useEffect, useRef } from 'react';
import regions from '../data/regions';

/* global naver */

const NaverMap = () => {
  const mapElement = useRef(null); // 지도가 렌더링될 div 요소를 참조
  const mapRef = useRef(null); // 네이버 지도 객체 참조

  useEffect(() => {
    if (!mapElement.current) return;

    // 네이버 지도 API 스크립트를 동적으로 추가
    const script = document.createElement("script");
    script.src = `https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=${process.env.REACT_APP_NAVER_CLIENT_ID}`;
    script.async = true;
    
    // 스크립트 로드 후 실행될 콜백
    script.onload = () => {
      // 지도 기본 옵션 설정
      const mapOptions = {
        center: new naver.maps.LatLng(37.5365, 126.9780), // 초기 중심 좌표
        zoom: 12, // 초기 확대 수준
      };

      // 네이버 지도 객체 생성 및 초기화
      mapRef.current = new naver.maps.Map(mapElement.current, mapOptions);

      // 각 지역에 마커 추가 (regions 데이터 기반)
      regions.forEach(region => {
        const markerOptions = {
          position: new naver.maps.LatLng(region.lat, region.lng), // 마커의 위치
          map: mapRef.current, // 마커를 표시할 지도 객체
          title: region.value // 마커의 타이틀 (지역 이름)
        };

        // 마커 생성
        new naver.maps.Marker(markerOptions);
      });
    };

    // 스크립트 로드 실패 시 에러 처리
    script.onerror = () => {
      console.error("Failed to load Naver Maps script");
    };

    // 동적으로 생성한 스크립트를 document.head에 추가
    document.head.appendChild(script);

    // 컴포넌트 언마운트 시 스크립트를 제거
    return () => {
      document.head.removeChild(script);
    };
  }, []);

  // 지도가 렌더링될 div 요소
  return <div ref={mapElement} style={{ width: '100%', height: '100%' }} />;
};

export default NaverMap;

 

내가 기존에 작성한 코드에서는 맵 이동시 지도 중앙 좌표를 저장하고,

해당 중앙 좌표에 일정 거리 이내에 있는 데이터만 받아올 수 있도록 짜놨는데

그게 좀 내가 원하는대로 실행되지 않는 것 같아서 그 부분은 제외했다.

그리고 지피티에게 주석을 부탁함 ㅎㅎ

 

regions이라는 파일의 형식은 

export const regions = [
    { label: '4·19 카페거리', value: '4·19 카페거리', lat: 37.637524, lng: 127.010522 },
    ...
    ]

이런식으로 되어있다.

 

+ 추후에 실행화면 추가 예정