Burger Map: React로 데이터 가져오기 및 표시하기

Let's setup our frontend application by typing the following command into your terminal:

npx create-react-app burger-map

This command will boilerplate a complete react application for you.

Jump into your project with cd burger-map and then start the development server with yarn start ,

This will start the react application which you can then visit at http://localhost:3000 .

Once this is done we can open up this project in the editor of our choice.

In the main file App.js safely remove all the stuff which is not needed the file will look like this:

import './App.css';

function App() {
    return (
        <div className="App">

        </div>
    );
}

export default App;

The next step is to fetch the data which we want to display. For that purpose we are going to use the npm module axios which will execute our HTTP requests.

Install it with yarn via the terminal:

yarn add axios

To add a state to our application, we need to import the useState hook. Since we want to call up the data right at the beginning of our application, we need the useEffect hook right away.
Import them at the beginning of App.js

import {useState, useEffect} from 'react';

We need one state to set our application into the loading state while fetching data, and one to store the burger data.
Lets to this with this to lines of code:

const [loading, setLoading] = useState(true)
const [burgers, setBurgers] = useState(null)

The function to fetch the data we place the useEffect hook, to be sure it is called right at the beginning of our application.
As mentiond we use axios to handle the get-request.
The URL of the API is where we get the burgers from is https://my-burger-api.herokuapp.com/burgers .

The useEffect hook should now look like this:

useEffect(() => {
    const fetchBurgers = async () => {

        const {data} = await axios.get("https://my-burger-api.herokuapp.com/burgers")

        setBurgers(data)
        setLoading(false)
    }

    fetchBurgers()
}, []);

When we check the response for e.g. with console.log(data)
we see that currently the address for each burger looks something like that:

[
    {
    addressId: 0
        country: "United Kingdom"
        line1: "Brick Lane"
        line2: "Shoreditch"
        number: "104"
        postcode: "E1 6RL"
    },
    ...
]

Since the Mapbox App is needing the latitude and longitude values to display the data on the correct position we have to call the geocoding endpoint. Here we have to pass the address object as a string seperated with ampersands.

For that case create the getLatLong function like that:

const getLatLong = async (address) => {
    const {line1, line2, number, postcode, country} = address;
    let searchKey = [line1, line2, number, postcode, country].filter(Boolean).join().replaceAll(" ", "&");

    const {data: {features}} = await axios.get(`https://api.mapbox.com/geocoding/v5/mapbox.places/${searchKey}.json?access_token=${MAPBOX_TOKEN}`)

    return features[0].center;
}

Now we need to call this function for each burger so adjust the fetchBurgers function to look like that:

useEffect(() => {
    const fetchBurgers = async () => {
        let burgers = []
        const {data} = await axios.get("https://my-burger-api.herokuapp.com/burgers")

        for (const burger of data) {
            burger.latLong = await getLatLong(burger.addresses[0])
            burgers.push(burger)
        }

        setBurgers(burgers)
        setLoading(false)
    }

    fetchBurgers()
}, []);

Now when we check our burger object we see a property latLong which is an array containing the lat and long values.

Now we come to the last part. We have to combine the data and the map.

For that create the renderBurgers function and call inside of the ReactMapGL component.
The renderBurgers function maps over all burgers, passes the lat and long values to the Marker and returns them on their location.
Whatever you pass inside the Marker Component will then be displayed on the map. In this case we render a X for each burger.

function renderBurgers() {
    return burgers.map(burger => (
        <Marker
            key={burger.id}
            latitude={burger.latLong[1]}
            longitude={burger.latLong[0]}
        >
            X
        </Marker>
    ))
}

The last step is to call the renderBurgers function in the ReactMapGl Component. So let's add it:

<ReactMapGL
    {...vieport}
    width="100vw"
    height="100vh"
    onViewportChange={nextVieport => setVieport(nextVieport)}
    mapboxApiAccessToken={MAPBOX_TOKEN}
>
    {renderBurgers()}
</ReactMapGL>

I also made a step by step video for this burger map on my .