목차

1. 요구 사항
2. Mapbox API를 사용하여 지도 띄우기
3. 음식점 데이터 가져오기
4. 지도에 음식점 마커 표시하기
5. 결론

1. 요구 사항

우리의 목표는 React 애플리케이션에서 Mapbox API를 사용하여 지도를 렌더링하고, 사용자 주변의 음식점 및 식당 정보를 표시하는 것입니다.

2. Mapbox API를 사용하여 지도 띄우기

먼저, Mapbox API를 사용하여 React 컴포넌트에서 지도를 띄우는 방법부터 시작하겠습니다. Mapbox GL JS를 사용하여 Mapbox 지도를 표시할 수 있으며, React에서는 “react-map-gl” 또는 “react-mapbox-gl”과 같은 패키지를 활용할 수 있습니다. 지도를 띄우면 사용자는 주변 음식점을 확인할 수 있을 것입니다.

import React from 'react';
import ReactMapGL from 'react-map-gl';

function Map() {
  const [viewport, setViewport] = React.useState({
    width: '100%',
    height: 400,
    latitude: 37.7577,
    longitude: -122.4376,
    zoom: 12
  });

  return (
    <ReactMapGL
      {...viewport}
      mapStyle="mapbox://styles/mapbox/streets-v11"
      onViewportChange={(viewport) => setViewport(viewport)}
      mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
    />
  );
}

3. 음식점 데이터 가져오기

지도를 표시했다면, 다음 단계는 주변 음식점 데이터를 가져오는 것입니다. 이를 위해 Yelp 또는 Google Places API와 같은 서드파티 API를 활용할 수 있습니다. 이러한 API를 사용하여 사용자의 위치 주변의 음식점 정보를 가져올 수 있습니다.

// Yelp API 호출 예시
const response = await fetch(`https://api.yelp.com/v3/businesses/search?latitude=${latitude}&longitude=${longitude}&categories=restaurants&radius=1000`, {
  headers: {
    Authorization: `Bearer ${process.env.YELP_API_KEY}`
  }
});
const data = await response.json();

4. 지도에 음식점 마커 표시하기

마지막으로, 가져온 음식점 데이터를 토대로 지도 위에 마커를 표시하여 사용자에게 주변 음식점 위치를 시각적으로 제공하는 것이 필요합니다. 리액트에서는 마커를 표시하고 관리하기 위해 “react-map-gl” 또는 “react-mapbox-gl” 라이브러리의 마커 컴포넌트를 사용할 수 있습니다.

<Marker latitude={restaurant.latitude} longitude={restaurant.longitude} offsetLeft={-20} offsetTop={-10}>
  <div>마커에 표시할 내용</div>
</Marker>

5. 결론

이제 React와 Mapbox API를 사용하여 지도 상에 음식점 및 식당 정보를 표시하는 방법에 대해 배웠습니다. 사용자에게 지도를 제공하고 주변 음식점을 시각적으로 표시함으로써 향상된 사용자 경험을 제공할 수 있습니다.

이상입니다! 기술 블로그에 포스팅하시기 전에 내용을 확인 후 문맥에 맞게 약간의 수정이 필요하겠지만, 위의 내용을 참고하시면 좋을 것 같습니다.