이 글에서는 리액트 프론트엔드에서 지도에서 위치 검색 및 주소 표시 기능을 구현하는 방법에 대해 자세히 설명합니다.
1. 서론
현대 웹 어플리케이션에서 지도를 활용한 기능은 사용자 경험을 향상시키는 중요한 요소입니다.
이 튜토리얼에서는 구글 맵 API를 사용하여 원하는 주소나 장소를 검색하고,
이를 지도에 표시하는 기능을 구현할 것입니다.
우리는 React를 사용하여 이 기능을 구성할 것이며,
기본적으로 사용할 라이브러리와 프레임워크에 대해 알아보겠습니다.
2. 프로젝트 설정
React 프로젝트를 설정하는 과정은 간단합니다. 아래 명령어를 사용하여 새로운 React 애플리케이션을 생성하세요.
npx create-react-app location-search-app프로젝트 디렉터리로 이동하여 필요한 라이브러리를 설치합니다.
cd location-search-app
npm install @react-google-maps/api위치는 구글 맵 API를 사용하기 위해 필요습니다. 구글 클라우드 플랫폼에서 API 키를 발급받아야 합니다.
API 키를 발급받은 후, .env 파일을 생성하고 다음 내용을 추가합니다.
REACT_APP_GOOGLE_MAPS_API_KEY=YOUR_API_KEY3. 기본 컴포넌트 생성
이제 기본적인 React 컴포넌트를 만들어 보겠습니다. 아래는 지도 컴포넌트를 생성하는 방법입니다.
{`import React, { useState } from 'react';
import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';
const containerStyle = {
width: '800px',
height: '600px'
};
const center = {
lat: -3.745,
lng: -38.523
};
const MyMap = () => {
const [markerPosition, setMarkerPosition] = useState(center);
const handleMapClick = (event) => {
setMarkerPosition({
lat: event.latLng.lat(),
lng: event.latLng.lng()
});
};
return (
);
};
export default MyMap;`}위 코드에서는 기본 지도와 마커를 정의합니다. 사용자가 지도를 클릭하면 마커의 위치가 업데이트 됩니다.
4. 주소 검색 기능 구현
주소 검색 기능을 추가하기 위해, 사용자가 입력한 주소를 기반으로 구글 맵 API를 통해 위치를 검색하고, 그 결과를 지도에 반영해야 합니다.
아래 코드에서 입력 필드를 추가하고, 주소 검색을 수행하는 함수를 구현하겠습니다.
{`const MyMap = () => {
const [markerPosition, setMarkerPosition] = useState(center);
const [address, setAddress] = useState('');
const handleAddressChange = (event) => {
setAddress(event.target.value);
};
const searchAddress = () => {
const geocoder = new window.google.maps.Geocoder();
geocoder.geocode({ address: address }, (results, status) => {
if (status === 'OK') {
setMarkerPosition(results[0].geometry.location);
} else {
alert('주소를 찾을 수 없습니다.');
}
});
};
return (
);
};`}위 코드는 사용자가 입력한 주소를 기반으로 마커의 위치를 업데이트하는 기능을 구현합니다. geocode() 메서드를 사용하여 주소를 위도 및 경도로 변환합니다.
5. 상태 관리 및 사용자 경험 향상
사용자 경험을 더욱 향상시키기 위해 주소 검색이 완료되면 알림 메시지를 표시하거나,
검색된 주소를 화면에 출력하는 등의 기능을 추가할 수 있습니다.
이와 같은 추가 작업을 통해 사용자가 검색 결과를 더 쉽게 확인할 수 있도록 도와줄 수 있습니다.
{`const MyMap = () => {
...
const [searchResult, setSearchResult] = useState('');
const searchAddress = () => {
const geocoder = new window.google.maps.Geocoder();
geocoder.geocode({ address: address }, (results, status) => {
if (status === 'OK') {
setMarkerPosition(results[0].geometry.location);
setSearchResult(results[0].formatted_address);
} else {
alert('주소를 찾을 수 없습니다.');
}
});
};
return (
...
{searchResult}
);
};`}이제 검색된 주소가 화면에 표시되어 사용자가 확인할 수 있습니다.
6. 마무리 및 확장 가능성
이번 글에서는 리액트를 사용하여 지도에서 위치를 검색하고 주소를 표시하는 기능을 구현하는 방법을 살펴보았습니다.
이 기본적인 기능을 바탕으로, 로컬 저장소를 사용하여 검색 기록을 저장하거나,
즐겨찾기 기능을 추가하는 등 다양한 확장 작업을 진행할 수 있습니다.