React 환경에서 Google Places API Autocomplete V2 마이그레이션 가이드

Google Places API Autocomplete V2 마이그레이션 가이드

핵심 기술

Google Maps Platform에서 제공하는 Places API의 AutocompleteService에서 AutocompleteSuggestion으로의 변경 사항과 React 환경에서의 마이그레이션 방법을 안내합니다. API 변경에 따른 실제 코드 수정 및 고려사항을 중심으로 설명합니다.

기술적 세부사항

• @react-google-maps/api 패키지 업데이트: 최신 버전으로 업데이트하여 새로운 API 지원을 활용합니다.
• Places API (New) 활성화: Google Cloud Console에서 Places API (New)를 활성화해야 합니다.
• AutocompleteSuggestion 사용:
  • google.maps.importLibrary('places')를 통해 AutocompleteSuggestion을 로드합니다.
  • AutocompleteSuggestion.fetchAutocompleteSuggestions 메서드를 사용하여 검색합니다.
• 주요 변경점:
  • componentRestrictions.country가 includedRegionCodes로 변경되었습니다. (최대 15개 코드 지원)
  • 반환되는 결과 객체의 구조가 변경되어 AutocompleteSuggestion 객체를 받게 됩니다.
  • 결과 객체의 placePrediction에서 mainText.text와 secondaryText.text를 조합하여 전체 주소를 구성해야 합니다. (description 필드 제거)
• 지역 제한 (Location Restriction):
  • locationRestriction은 하나의 바운딩 박스만 지원합니다.
  • 여러 지역(예: GB, TX)을 지원하기 위해 응답 필터링 등의 우회 방법을 사용할 수 있습니다. (예: label의 마지막 부분을 파싱하여 지역 코드 확인)

개발 임팩트

• Google Places API의 최신 기능을 활용하여 더 안정적이고 개선된 자동 완성 경험을 제공할 수 있습니다.
• API 변경 사항에 대한 신속한 대응을 통해 서비스의 기능 유지 및 개선을 보장합니다.
• includedRegionCodes 확장을 통해 더 넓은 지역의 사용자에게 서비스를 제공할 수 있습니다.

커뮤니티 반응

원문에서는 커뮤니티 반응에 대한 직접적인 언급은 없으나, Google API의 주요 변경 사항에 대한 개발자들의 관심과 정보 공유의 필요성을 보여주는 사례입니다.