오늘 우리는 React를 사용하여 위치 기반 서비스 애플리케이션을 만드는 방법을 배울 것입니다. 이 애플리케이션은 사용자의 현재 위치를 기반으로 주변 관광지를 추천합니다. 사용자는 대화형 필터를 통해 관광지를 선택할 수 있으며, 이를 통해 여행 계획을 보다 효율적으로 세울 수 있습니다. 이 글에서는 프로젝트 구조, 필수 라이브러리, 지도 컴포넌트 및 필터 기능 구현에 대해 자세히 설명하겠습니다.
프로젝트 설정
우선, React 애플리케이션을 생성하기 위해 create-react-app을 사용합니다. 커맨드 라인에서 아래 명령어를 입력하십시오.
npx create-react-app tourism-app생성된 프로젝트 디렉토리로 이동합니다.
cd tourism-app필수 라이브러리 설치
이 프로젝트에서는 react-google-maps와 axios를 사용할 것입니다. react-google-maps는 Google Maps API와 통합하여 산출되는 맵을 수월하게 관리할 수 있게 해줍니다. axios는 API 요청을 간편하게 처리할 수 있게 도와줍니다.
npm install @react-google-maps/api axios프로젝트 구조
이제 전체적인 프로젝트 구조를 구성해봅시다. 아래와 같이 디렉터리를 구성합니다.
tourism-app/
├── public/
├── src/
│ ├── components/
│ │ ├── Map.js
│ │ └── Filter.js
│ ├── App.js
│ └── index.js
└── package.json
지도 컴포넌트 구현
이제 Google Maps를 사용하는 맵 컴포넌트를 만들어 봅시다. Map.js 파일을 다음과 같이 작성합니다.
javascript
import React from 'react';
import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';
const containerStyle = {
width: '100%',
height: '400px'
};
const center = {
lat: -3.745,
lng: -38.523
};
const MapComponent = ({ locations }) => {
return (
{locations.map((location, index) => (
);
}
export default React.memo(MapComponent);
위 코드에서 YOUR_API_KEY는 Google Cloud Console에서 발급받은 API 키로 바꿔야 합니다. 이 컴포넌트는 기본적으로 중심 좌표와 줌 레벨을 설정하며, 전달받은 관광지의 위치에 마커를 표시합니다.
필터 컴포넌트 구현
이제 사용자에게 필터를 제공할 Filter.js 컴포넌트를 만들어 보겠습니다. 사용자는 선택한 카테고리에 따라 관광지를 필터링할 수 있습니다.
javascript
import React, { useState } from 'react';
const FilterComponent = ({ categories, onFilterChange }) => {
const [selectedCategory, setSelectedCategory] = useState('');
const handleCategoryChange = (event) => {
const category = event.target.value;
setSelectedCategory(category);
onFilterChange(category);
}
return (
관광지 필터
);
}
export default FilterComponent;
사용자가 선택한 카테고리를 부모 컴포넌트에 전달하며 필터링 기능을 구현합니다.
상태 관리 및 API 데이터 가져오기
이제 App.js에서 상태 관리를 구현하고 API로부터 관광지 데이터를 가져올 것입니다. 우리는 Axios를 사용하여 데이터 요청을 수행할 것입니다.
javascript
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import MapComponent from './components/Map';
import FilterComponent from './components/Filter';
const App = () => {
const [locations, setLocations] = useState([]);
const [filteredLocations, setFilteredLocations] = useState([]);
const [categories, setCategories] = useState(['역사적', '자연', '문화적']);
useEffect(() => {
const fetchLocations = async () => {
const response = await axios.get('YOUR_API_ENDPOINT');
setLocations(response.data);
setFilteredLocations(response.data);
};
fetchLocations();
}, []);
const handleFilterChange = (category) => {
if (category) {
const filtered = locations.filter(location => location.category === category);
setFilteredLocations(filtered);
} else {
setFilteredLocations(locations);
}
};
return (
관광지 추천 앱
위 코드에서는 API로부터 데이터를 불러온 후, 카테고리에 따라 필터링할 수 있도록 상태를 관리합니다. 필터가 변경될 때마다 handleFilterChange 함수가 호출되어 필터링된 관광지 목록을 업데이트합니다.
독립 실행 가능한 예제
위의 코드를 완성하여 나만의 위치 기반 서비스 애플리케이션을 만들 수 있습니다. 아래는 모두를 통합한 전체 코드입니다.
javascript
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';
const containerStyle = {
width: '100%',
height: '400px'
};
const center = {
lat: -3.745,
lng: -38.523
};
const MapComponent = ({ locations }) => {
return (
{locations.map((location, index) => (
);
}
const FilterComponent = ({ categories, onFilterChange }) => {
const [selectedCategory, setSelectedCategory] = useState('');
const handleCategoryChange = (event) => {
const category = event.target.value;
setSelectedCategory(category);
onFilterChange(category);
}
return (
관광지 필터
);
}
const App = () => {
const [locations, setLocations] = useState([]);
const [filteredLocations, setFilteredLocations] = useState([]);
const [categories, setCategories] = useState(['역사적', '자연', '문화적']);
useEffect(() => {
const fetchLocations = async () => {
const response = await axios.get('YOUR_API_ENDPOINT');
setLocations(response.data);
setFilteredLocations(response.data);
};
fetchLocations();
}, []);
const handleFilterChange = (category) => {
if (category) {
const filtered = locations.filter(location => location.category === category);
setFilteredLocations(filtered);
} else {
setFilteredLocations(locations);
}
};
return (
관광지 추천 앱
마무리
이 글에서 React를 사용하여 위치 기반 서비스 애플리케이션을 만드는 방법을 소개했습니다. 사용자에게 유용한 관광지 정보를 제공하는 이 앱은 실제 여행 계획에 큰 도움이 될 것입니다. 다양한 카테고리와 필터링 기능을 통해 사용자 경험을 개선할 수 있습니다. 이제 이 프로젝트를 블로그에 포스팅하여 더 많은 사람들과 공유해 보세요!