네이버 지식쇼핑 API로 간단한 React 쇼핑몰 만들기

npx create-react-app naver-shopping
cd naver-shopping
npm install axios

REACT_APP_NAVER_CLIENT_ID=YOUR_CLIENT_ID
REACT_APP_NAVER_CLIENT_SECRET=YOUR_CLIENT_SECRET

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import './App.css';

function App() {
  const [products, setProducts] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchProducts = async () => {
      try {
        const response = await axios.get('https://openapi.naver.com/v1/search/shop.json', {
          params: {
            query: 'specific shop name', // 특정 쇼핑몰의 이름을 여기에 입력합니다.
            display: 10,
            start: 1,
            sort: 'sim'
          },
          headers: {
            'X-Naver-Client-Id': process.env.REACT_APP_NAVER_CLIENT_ID,
            'X-Naver-Client-Secret': process.env.REACT_APP_NAVER_CLIENT_SECRET
          }
        });

        setProducts(response.data.items);
      } catch (err) {
        setError(err);
      }
    };

    fetchProducts();
  }, []);

  return (
    <div className="App">
      <h1>Product List</h1>
      {error && <p>Error fetching products: {error.message}</p>}
      <ul>
        {products.map(product => (
          <li key={product.link}>
            <a href={product.link} target="_blank" rel="noopener noreferrer">
              <img src={product.image} alt={product.title} />
              <p>{product.title}</p>
              <p>{product.lprice} 원</p>
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

.App {
  font-family: Arial, sans-serif;
  text-align: center;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin: 10px 0;
}

img {
  width: 100px;
  height: 100px;
}

a {
  text-decoration: none;
  color: black;
}

npm start