React로 위치 기반 서비스 애플리케이션 만들기, 특정 사용자 위치에서 반경 내 장소 검색 및 리스트 뷰 구성

본 강좌에서는 React를 사용하여 위치 기반 서비스 애플리케이션을 만드는 방법에 대해 설명합니다. 특정 사용자 위치를 기반으로 반경 내 장소를 검색하고, 그 결과를 리스트 뷰로 표시하는 방법을 알아보겠습니다.

1. 위치 기반 서비스란?

위치 기반 서비스(Location-Based Services, LBS)란 사용자의 위치 정보를 활용하여 특정 서비스나 정보를 제공하는 것을 말합니다. 대표적인 예로는 지도 애플리케이션, 음식 배달 서비스, 주변 가게 검색 등이 있습니다. 이러한 서비스는 GPS, Wi-Fi, 모바일 데이터를 활용하여 사용자의 현재 위치를 파악하고, 그 주위의 장소들을 검색하거나 추천합니다.

2. React 주제 소개

React는 페이스북에서 개발한 오픈 소스 자바스크립트 라이브러리로, 사용자 인터페이스 구축에 특화되어 있습니다. 컴포넌트 기반의 구조로 되어 있어 재사용이 용이하며, 가상 DOM을 사용하여 성능 최적화와 빠른 렌더링을 제공합니다. 이번 강좌를 통해 React로 위치 기반 서비스를 구축하면서 React의 기초와 활용 방법에 대해 알아보겠습니다.

3. 프로젝트 설정하기

먼저, 새로운 React 프로젝트를 생성합니다. 터미널에서 다음 명령어를 실행하세요.

npx create-react-app location-based-service

이 명령어는 “location-based-service”라는 디렉토리 안에 기본 React 프로젝트 구조를 생성합니다. 프로젝트 디렉토리로 이동하여 서버를 시작합니다.

cd location-based-service
npm start

브라우저에서 http://localhost:3000에 접속하여 기본 React 애플리케이션이 잘 실행되는지 확인합니다.

4. 위치 정보 가져오기

위치 기반 서비스를 개발하기 위해서는 사용자 위치 정보를 가져와야 합니다. 이를 위해 HTML5 Geolocation API를 사용할 수 있습니다. React의 useEffect와 useState Hook을 사용하여 사용자 위치를 가져오는 컴포넌트를 만들어 보겠습니다.


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

const LocationFetcher = () => {
    const [location, setLocation] = useState(null);
    const [error, setError] = useState(null);

    useEffect(() => {
        if (!navigator.geolocation) {
            setError("Geolocation is not supported by your browser.");
            return;
        }
        navigator.geolocation.getCurrentPosition(
            (position) => {
                setLocation({
                    latitude: position.coords.latitude,
                    longitude: position.coords.longitude,
                });
            },
            (err) => {
                setError(err.message);
            }
        );
    }, []);

    if (error) return 
Error: {error}
;
    if (!location) return 
Loading...
;

    return (
        

            
User Location

            
Latitude: {location.latitude}

            
Longitude: {location.longitude}

        

    );
};

export default LocationFetcher;

위 코드에서 navigator.geolocation.getCurrentPosition 메서드를 사용하여 사용자의 현재 위치를 가져오고 있습니다. 위치 정보는 상태(state)를 통해 저장되며, 오류가 발생하면 오류 메시지를 표시합니다.

5. 장소 검색 API 사용하기

사용자의 위도와 경도를 기반으로 주변 장소를 검색하기 위해서는 외부 장소 검색 API를 사용할 수 있습니다. 예를 들어, Google Places API나 Foursquare API를 사용할 수 있습니다. 이번 강좌에서는 Google Places API를 사용하여 장소를 검색해 보겠습니다.

Google Places API를 사용하기 위해서는 API 키를 받아야 합니다. Google Cloud Console에 가입하고 프로젝트를 생성한 뒤, Places API를 활성화하세요. API 키를 생성한 후, 다음 코드를 추가하여 사용자의 위치를 기반으로 장소를 검색합니다.


const fetchNearbyPlaces = async (latitude, longitude) => {
    const apiKey = 'YOUR_GOOGLE_PLACES_API_KEY';
    const radius = 1000; // 1km 이내의 장소 검색
    const type = 'restaurant'; // 검색할 장소의 유형

    const res = await fetch(`https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${latitude},${longitude}&radius=${radius}&type=${type}&key=${apiKey}`);
    const data = await res.json();
    return data.results;
};

위 함수는 사용자의 위도와 경도를 인수로 받아 주변의 음식점 정보를 가져오는 함수를 정의한 것입니다. API 응답의 결과는 data.results에 담기며, 나중에 이 정보를 리스트로 표시할 수 있습니다.

6. 장소 검색 및 리스트 뷰 구성하기

이제 사용자 위치를 가져오고, 해당 위치를 기반으로 장소를 검색하는 작업을 통합하겠습니다. 아래 코드는 이 과정을 통합한 React 컴포넌트를 보여줍니다.


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

const NearbyPlaces = () => {
    const [location, setLocation] = useState(null);
    const [places, setPlaces] = useState([]);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchLocation = () => {
            if (!navigator.geolocation) {
                setError("Geolocation is not supported by your browser.");
                return;
            }
            navigator.geolocation.getCurrentPosition(
                (position) => {
                    setLocation({
                        latitude: position.coords.latitude,
                        longitude: position.coords.longitude,
                    });
                },
                (err) => {
                    setError(err.message);
                }
            );
        };

        fetchLocation();
    }, []);

    useEffect(() => {
        const fetchNearbyPlaces = async () => {
            if (location) {
                const apiKey = 'YOUR_GOOGLE_PLACES_API_KEY';
                const radius = 1000; 
                const type = 'restaurant'; 

                const res = await fetch(`https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${location.latitude},${location.longitude}&radius=${radius}&type=${type}&key=${apiKey}`);
                const data = await res.json();
                setPlaces(data.results);
            }
        };

        fetchNearbyPlaces();
    }, [location]);

    if (error) return 
Error: {error}
;
    if (!location) return 
Loading...
;

    return (
        

            
Nearby Restaurants

            
    
                {places.map(place => (
                    
  • 
                        
    {place.name}
    
                        
    {place.vicinity}
    
                    
    • 
                ))}
            

        

    );
};

export default NearbyPlaces;

위 코드에서는 사용자의 위치를 가져온 후, 이를 기반으로 검색된 장소 리스트를 표시합니다. places.map을 통해 각 장소에 대한 이름과 주소를 출력하고 있습니다.

7. 최종 애플리케이션 통합하기

이제 모든 개별 컴포넌트를 통합하여 최종 애플리케이션을 완성해보겠습니다. 다음 코드는 전체 애플리케이션의 구조를 보여줍니다.


import React from 'react';
import LocationFetcher from './LocationFetcher';
import NearbyPlaces from './NearbyPlaces';

const App = () => {
    return (
        

            
위치 기반 서비스 애플리케이션

            
            
        

    );
};

export default App;

위 코드는 LocationFetcher와 NearbyPlaces 컴포넌트를 포함하여 사용자에게 위치 정보와 주변 장소를 보여주는 메인 컴포넌트를 정의합니다.

8. 스타일링

기본적인 기능이 구현되었으므로, CSS를 사용하여 애플리케이션의 스타일을 개선할 수 있습니다. 아래는 간단한 CSS 스타일링 예시입니다.


/* App.css */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}

h1 {
    text-align: center;
}

ul {
    list-style: none;
}

h2 {
    color: #333;
}

li {
    background-color: #fff;
    border: 1px solid #ddd;
    margin: 10px 0;
    padding: 15px;
    border-radius: 5px;
}

이 스타일을 App.css 파일에 추가하고 App.js에 임포트하면 애플리케이션의 디자인을 한층 더 개선할 수 있습니다.

9. 향후 개선 사항

현재 애플리케이션은 기본적인 기능인 위치 기반 장소 검색을 구현하였으나, 향후 다음과 같은 기능들을 추가하여 개선할 수 있습니다.

  • 지도 통합: 장소를 지도 위에 마커로 표시하는 기능 추가
  • 검색 필터: 음식점, 카페 등 장소 타입에 따라 필터링 기능 추가
  • 사용자 리뷰: 각 장소에 대해 사용자 리뷰 기능 추가
  • 즐겨찾기 기능: 사용자들이 좋아하는 장소를 저장할 수 있는 기능 추가

10. 결론

이 강좌를 통해 React를 이용한 위치 기반 서비스 애플리케이션의 기본적인 구조와 과정을 배워보았습니다. 이 과정을 통해 React의 기본 개념인 컴포넌트, 상태 관리, 외부 API 호출 등을 실습할 수 있었습니다. 향후 다양한 기능을 추가하여 여러분만의 위치 기반 서비스를 발전시켜 나가길 바랍니다.

감사합니다!