지도와 데이터 시각화 연동하기, 특정 범위 내의 데이터 필터링 및 시각화

오늘날 데이터 시각화는 다양한 분야에서 필수적인 기술로 자리 잡고 있습니다. 특히, 지리적 데이터를 시각화할 때는 종종 지도와 같은 시각적 도구가 활용됩니다. 이번 강좌에서는 React를 사용하여 지도와 데이터를 연동하고, 특정 범위 내의 데이터를 필터링하여 시각화하는 방법에 대해 알아보겠습니다. 이를 통해 사용자 인터페이스를 개선하고, 데이터 간의 관계를 명확하게 이해할 수 있는 방법을 배울 것입니다.

1. 프로젝트 설정

시작하기에 앞서 React 프로젝트를 설정해야 합니다. Create React App을 사용하여 프로젝트를 생성할 수 있습니다. 아래의 명령어를 실행합니다:

npx create-react-app map-data-visualization

프로젝트 폴더로 이동한 후, 필요한 패키지를 설치합니다. 우리는 지도 시각화에 react-leaflet을 사용하고, 데이터 관리를 위해 axios를 사용할 것입니다. 아래의 명령어를 이용해 설치합니다:

cd map-data-visualization
npm install leaflet react-leaflet axios

2. 기본 구조 설정

프로젝트의 기본 구조를 설정합니다. src 폴더 내에 MapComponent.js라는 새 파일을 생성하고, 다음의 기본 코드를 추가합니다:

import React from 'react';
import { MapContainer, TileLayer } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';

const MapComponent = () => {
  return (
    
      
    
  );
};

export default MapComponent;

위의 코드는 기본 지도를 표시합니다. 지도는 OpenStreetMap의 타일 레이어를 사용하여 렌더링됩니다.

3. 데이터 가져오기

다음 단계로, 외부 API 또는 로컬 파일에서 데이터를 가져오는 방법을 설정합니다. 이번 예제에서는 인증된 오픈 API에서 GeoJSON 형식의 데이터를 가져오는 예를 사용하겠습니다. axios 패키지를 사용하여 데이터를 가져옵니다:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const useFetchData = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('YOUR_API_URL');
        setData(response.data.features); // GeoJSON 형식으로 가정
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  return { data, loading, error };
};

export default useFetchData;

위의 코드는 API에서 데이터를 비동기적으로 가져오는 훅을 설정합니다. 가져온 데이터는 GeoJSON 형식으로 가정하고, features 배열을 상태로 설정합니다.

4. 지도에 데이터 시각화하기

데이터를 가져온 후에는 해당 데이터를 지도에 시각화해야 합니다. 이 단계에서는 가져온 GeoJSON 데이터를 사용하여 마커나 폴리라인을 추가합니다:

import React from 'react';
import { GeoJSON } from 'react-leaflet';

const DataLayer = ({ data }) => {
  return ;
};

export default DataLayer;

위의 DataLayer 컴포넌트는 GeoJSON 데이터를 받아서 지도에 마크업합니다. 이 데이터는 지도에 표시할 형태로 변환되어야 하며, 각 피처는 올바르게 스타일링되어야 합니다.

5. 특정 범위 내의 데이터 필터링

사용자가 특정 범위를 선택할 수 있도록 필터링 기능을 추가합니다. 주로 지도의 범위를 감지하여 그 안에 있는 데이터만 필터링하는 방식으로 구현할 수 있습니다. Leaflet의 map.getBounds() 메서드를 사용하여 현재 보이는 영역을 확인합니다:

const MapComponent = () => {
  const { data, loading, error } = useFetchData();
  const [filteredData, setFilteredData] = useState([]);

  const mapRef = useRef();

  const handleBoundsChange = () => {
    const bounds = mapRef.current.getBounds();
    const filtered = data.filter(feature => {
      const coords = feature.geometry.coordinates;
      return (
        coords[0] >= bounds.getSouthWest().lng &&
        coords[0] <= bounds.getNorthEast().lng &&
        coords[1] >= bounds.getSouthWest().lat &&
        coords[1] <= bounds.getNorthEast().lat
      );
    });
    setFilteredData(filtered);
  };

  return (
    
      
      
    
  );
};

위의 코드에서 보이는 것처럼, onViewportChanged 이벤트를 활용하여 지도의 범위가 변경될 때마다 filteredData를 업데이트하게 됩니다.

6. 사용자 인터페이스 개선

사용자에게 보다 나은 경험을 제공하기 위해 필터링된 데이터의 수를 사용자에게 표시하는 기능을 추가합니다. 이를 통해 사용자는 현재 보이는 범위의 데이터 양을 쉽게 이해할 수 있습니다:

const MapComponent = () => {
  // ...이전 코드와 동일...

  return (
    
      현재 범위 내 데이터 수: {filteredData.length}
      
        
        
      
    
  );
};

7. 마무리 및 성능 최적화

성능을 최적화하기 위해, 데이터가 많아질 경우 적절한 전략을 세워야 합니다. 예를 들어, 사용자가 지도의 범위를 조정할 때마다 API를 호출해 데이터를 가져오는 것보다, 필요한 데이터 전체를 한 번에 가져오고 프론트엔드에서 필터링하는 것이 더 효율적일 수 있습니다.

이와 같이 React를 통해 지도와 데이터를 연동하여 시각화하는 방법을 살펴보았습니다. 다양한 데이터 소스를 연동하고, 사용자 상호작용을 통해 필터링하는 기능을 구현하여 사용자의 경험을 개선할 수 있습니다. 이번 강좌를 통해 쌓은 지식을 활용하여 보다 복잡한 데이터 시각화 프로젝트로 나아가길 바랍니다.

8. 추가 리소스

아래는 추가 학습에 도움이 될 수 있는 리소스입니다: