1. 맵박스 API 예시

Mapbox는 지도, 내비게이션 서비스 및 기타 위치 기반 애플리케이션을 만드는 데 사용할 수 있는 포괄적인 도구와 정확한 위치 데이터를 제공합니다. Mapbox를 사용하면 맞춤형 지도 표시, 위치정보 통합 등 다양한 기능을 사용할 수 있습니다.
링크

import React, { useEffect } from 'react';

const Mapbox = () => {
    useEffect(() => {
        // Set your Mapbox access token here
        const mapboxAccessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

        // Create a map instance
        const map = new mapboxgl.Map({
            container: 'map', // Container ID in the HTML
            style: 'mapbox://styles/mapbox/streets-v11', // Style URL
            center: [-74.5, 40], // Starting position [lng, lat]
            zoom: 9, // Starting zoom
        });

        mapboxgl.accessToken = mapboxAccessToken;
    }, []);

    return (
        

            
Mapbox Example
            

        
    );
};

export default Mapbox;

2. NASA API 예시

NASA API는 이미지, 비디오, 행성, 별 등에 대한 정보를 포함하여 우주와 관련된 풍부한 데이터에 대한 액세스를 제공합니다. 교육 도구를 구축하거나 멋진 우주 데이터를 표시하려는 경우 NASA의 API는 훌륭한 리소스입니다.
링크

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const Nasa = () => {
    const [data, setData] = useState(null);

    useEffect(() => {
        axios.get('https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY')
            .then(response => setData(response.data))
            .catch(error => console.error('Error fetching data from NASA API:', error));
    }, []);

    return (
        

            
NASA Astronomy Picture of the Day
            {data ? (
                

                    
{data.title}
                    
{data.explanation}
                
            ) : (
                
Loading...
            )}
        
    );
};

export default Nasa;

3. 즐겨찾는 명언 API 예시

이 API는 애플리케이션에 쉽게 통합할 수 있는 통찰력 있는 인용문 모음을 제공합니다. 사용자에게 영감을 주고 동기를 부여하는 앱을 만드는 데 적합합니다.
링크

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const Quotes = () => {
    const [quote, setQuote] = useState('');

    useEffect(() => {
        axios.get('https://favqs.com/api/qotd')
            .then(response => setQuote(response.data.quote.body))
            .catch(error => console.error('Error fetching data from Quotes API:', error));
    }, []);

    return (
        

            
Quote of the Day
            
{quote}
        
    );
};

export default Quotes;

4. Edamam API 예시

Edamam은 상세한 건강 분석과 함께 식품 및 요리법에 대한 포괄적인 데이터베이스에 대한 액세스를 제공합니다. 이 API는 다이어트 추적기, 레시피 앱, 영양 기반 애플리케이션을 만드는 데 이상적입니다.
링크

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const Edamam = () => {
    const [recipes, setRecipes] = useState([]);
    const query = "chicken"; // Example search query

    useEffect(() => {
        const appId = 'YOUR_EDAMAM_APP_ID';
        const appKey = 'YOUR_EDAMAM_APP_KEY';

        axios.get(`https://api.edamam.com/search?q=${query}&app_id=${appId}&app_key=${appKey}`)
            .then(response => setRecipes(response.data.hits))
            .catch(error => console.error('Error fetching data from Edamam API:', error));
    }, []);

    return (
        

            
Edamam Recipes for "{query}"
            

                {recipes.map((recipe, index) => (
                    

                        
                        {recipe.recipe.label}
                    
                ))}
            
    );
};

export default Edamam;

5. 가짜 스토어 API 예시

Fake Store API는 전자상거래 프로젝트를 진행하는 개발자를 위한 환상적인 도구입니다. 매장을 제품, 가격, 카테고리로 채우는 데 사용할 수 있는 유사 실제 데이터를 제공합니다.
링크

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const FakeStore = () => {
    const [products, setProducts] = useState([]);

    useEffect(() => {
        axios.get('https://fakestoreapi.com/products')
            .then(response => setProducts(response.data))
            .catch(error => console.error('Error fetching data from Fake Store API:', error));
    }, []);

    return (
        

            
Fake Store Products
            

                {products.map(product => (
                    

                        
                        {product.title}
                    
                ))}
            
    );
};

export default FakeStore;

6. 포켓몬 API 예시

PokeAPI(PokeAPI)는 모든 포켓몬 팬에게 꼭 필요한 도구입니다. 통계, 유형, 능력을 포함하여 모든 포켓몬에 대한 포괄적인 데이터를 제공하므로 포켓몬 관련 앱과 게임을 구축하는 데 적합합니다.
링크

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const Pokemon = () => {
    const [pokemonList, setPokemonList] = useState([]);

    useEffect(() => {
        axios.get('https://pokeapi.co/api/v2/pokemon?limit=10')
            .then(response => setPokemonList(response.data.results))
            .catch(error => console.error('Error fetching data from Pokémon API:', error));
    }, []);

    return (
        

            
Pokémon List
            

                {pokemonList.map((pokemon, index) => (
                    

                        {pokemon.name}
                    
                ))}
            
    );
};

export default Pokemon;

7. IGDB API 예시

인터넷 게임 데이터베이스(IGDB) API는 수천 개의 비디오 게임에 대한 데이터를 제공하여 비디오 게임 중심의 웹사이트와 애플리케이션을 만들 수 있도록 해줍니다. 게임, 플랫폼, 장르 등에 대한 정보를 가져올 수 있습니다.
링크

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const IGDB = () => {
    const [games, setGames] = useState([]);

    useEffect(() => {
        const apiKey = 'YOUR_IGDB_API_KEY';

        axios.post('https://api.igdb.com/v4/games/', 
        'fields name, cover.url; sort popularity desc; limit 10;', 
        { headers: { 'Client-ID': 'YOUR_CLIENT_ID', 'Authorization': `Bearer ${apiKey}` } })
            .then(response => setGames(response.data))
            .catch(error => console.error('Error fetching data from IGDB API:', error));
    }, []);

    return (
        

            
Popular Video Games
            

                {games.map(game => (
                    

                        {game.cover ?  : null}
                        {game.name}
                    
                ))}
            
    );
};

export default IGDB;

결론

이러한 각 예는 해당 API를 React, Next에 통합하는 방법을 보여줍니다. 더 자세한 정보 표시, 사용자 상호 작용 처리, 더 나은 UX를 위한 출력 스타일 지정 등 애플리케이션의 요구 사항에 맞게 이러한 예제를 쉽게 확장할 수 있습니다.

이 예는 다양한 무료 API에서 데이터를 가져오고 표시하는 것이 얼마나 간단한지 보여줍니다.