최근 몇 년간 웹 애플리케이션에서 지도 기능은 필수적인 요소가 되었습니다. 사용자에게 위치 기반 서비스를 제공하기 위해, 지도에서 특정 주소를 검색하고 해당 위치에 마커를 표시하는 기능을 구현하는 것은 매우 유용합니다. 이번 포스트에서는 Geocoding API를 이용한 주소 변환 및 위치 마커 표시 기능을 리액트 앱에서 구현하는 방법에 대해 자세히 알아보겠습니다.

1. 프로젝트 설정

먼저 새로운 리액트 프로젝트를 생성하겠습니다. 터미널을 열고 다음 명령어를 실행하여 프로젝트를 생성합니다:

npx create-react-app location-search-app

프로젝트가 생성되면 해당 디렉토리로 이동합니다:

cd location-search-app

2. 필요한 라이브러리 설치

구글 맵스 API를 사용하기 위해 react-google-maps/api 라이브러리를 설치합니다. 다음 명령어를 통해 설치할 수 있습니다:

npm install @react-google-maps/api

또한, axios 라이브러리를 사용하여 Geocoding API와 통신하기 위해 설치합니다:

npm install axios

3. Geocoding API 사용하기

Geocoding API는 주소를 좌표로 변환해주는 서비스입니다. 구글 클라우드 플랫폼에서 Geocoding API를 활성화한 후 API 키를 발급받아야 합니다. API 키를 발급받았다면 아래와 같은 형식으로 주소를 전달하여 사용합니다.

Geocoding API 호출 예제

const axios = require('axios');

const getCoordinates = async (address) => {
    const apiKey = 'YOUR_API_KEY'; // 발급받은 API 키
    const url = `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(address)}&key=${apiKey}`;
    
    try {
        const response = await axios.get(url);
        return response.data.results[0].geometry.location; // 위도와 경도 반환
    } catch (error) {
        console.error('Error fetching data from Geocoding API', error);
    }
};

// 사용 예제
getCoordinates('서울특별시 종로구').then(location => {
    console.log(location); // { lat: 37.573021, lng: 126.979430 }
});
    

4. 지도 컴포넌트 구현하기

이제 리액트 컴포넌트를 생성하여 사용할 지도와 입력 필드를 구현하겠습니다. src/Map.js 파일을 생성하고 아래와 같이 작성합니다:

import React, { useState, useEffect } from 'react';
import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';
import axios from 'axios';

const Map = () => {
    const [location, setLocation] = useState({ lat: 37.573021, lng: 126.979430 });
    const [address, setAddress] = useState('');
    const apiKey = 'YOUR_API_KEY'; // 발급받은 API 키

    const mapContainerStyle = {
        width: '100%',
        height: '400px'
    };

    const center = {
        lat: location.lat,
        lng: location.lng
    };

    const handleAddressChange = (e) => {
        setAddress(e.target.value);
    };

    const handleSearch = async () => {
        const coordinates = await getCoordinates(address);
        setLocation(coordinates);
    };

    const getCoordinates = async (address) => {
        const url = `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(address)}&key=${apiKey}`;
        
        try {
            const response = await axios.get(url);
            return response.data.results[0].geometry.location;
        } catch (error) {
            console.error('Error fetching data from Geocoding API', error);
        }
    };

    return (
        
            

                
                검색
                
                    
                
            
        
    );
};

export default Map;
    

5. App.js에 Map 컴포넌트 추가하기

이제 메인 애플리케이션 파일인 src/App.js에서 방금 만든 맵 컴포넌트를 추가해 보겠습니다:

import React from 'react';
import Map from './Map';

const App = () => {
    return (
        

            
주소 검색 및 위치 표시
            
        
    );
};

export default App;
    

6. 결론

이번 포스트에서는 리액트 애플리케이션에서 지도에서 위치를 검색하고 마커를 표시하는 기능을 구현해보았습니다. Geocoding API를 통해 주소를 좌표로 변환시킬 수 있었고, 이를 통해 지도에서 해당 위치를 시각적으로 보여줄 수 있었습니다.

앞으로 더 많은 기능들을 추가하여 더욱 유용한 웹 애플리케이션을 만들어보는 것이 좋겠습니다. 예를 들어, 여러 개의 마커를 표시하거나 사용자의 현재 위치를 조회하는 기능을 추가할 수 있습니다. 이러한 기능을 통해 사용자 경험을 더욱 향상시킬 수 있습니다.

리액트를 활용하여 많은 가능성을 탐색해보시기를 바랍니다!