[react] 지도에서 확대/축소 동작 구현하기

22 Dec 2023

react

React 애플리케이션에서 지도를 사용하고 싶다면, 확대/축소 동작을 구현하는 것이 중요합니다. 본 포스트에서는 React와 Leaflet 라이브러리를 사용하여 지도 확대/축소를 구현하는 방법을 알아보겠습니다.

Leaflet 라이브러리 설치하기

먼저, 프로젝트에 Leaflet 라이브러리를 설치해야 합니다. 아래의 명령어를 사용하여 Leaflet을 설치합니다.

npm install leaflet react-leaflet

지도 컴포넌트 생성하기

다음으로, 확대/축소 동작을 구현할 지도 컴포넌트를 생성합니다. 이를 위해 Leaflet의 Map 및 TileLayer 컴포넌트를 사용합니다. 아래는 간단한 지도 컴포넌트의 예시입니다.

import React from 'react';
import { Map, TileLayer } from 'react-leaflet';

const MapComponent = () => {
  return (
    <Map center={[51.505, -0.09]} zoom={13}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
    </Map>
  );
}

확대/축소 컨트롤 추가하기

지도에 확대/축소를 위한 컨트롤을 추가해 보겠습니다. Leaflet은 ZoomControl 컴포넌트를 제공하여 이를 구현할 수 있습니다. 아래는 지도에 확대/축소 컨트롤을 추가하는 예시입니다.

import React from 'react';
import { Map, TileLayer, ZoomControl } from 'react-leaflet';

const MapComponent = () => {
  return (
    <Map center={[51.505, -0.09]} zoom={13} zoomControl={false}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <ZoomControl position="bottomright" />
    </Map>
  );
}

마치며

이제 React와 Leaflet을 사용하여 지도 확대/축소 동작을 구현하는 방법에 대해 알아보았습니다. Leaflet을 통해 다양한 기능을 추가하여 지도를 보다 다양하고 유용하게 활용할 수 있습니다. 만약 추가적인 기능이 필요하다면, Leaflet 공식 문서를 참고하시기 바랍니다.