쇼핑몰 프로젝트 - 상품목록 더보기 버튼

비동기 HTTP 통신을 위해 자주사용하는 라이브러리인 axios를 통해 필요한 데이터를 불러와 보겠습니다.

<사용방법>

import axios from 'axios'

function App(){

  let [shoes, setShoes] = useState(어쩌구);
  return (
    <button onClick={()=>{
      axios.get('https://codingapple1.github.io/shop/data2.json').then((결과)=>{
        let copy = [...shoes, ...결과.data]
        setShoes(copy)
      })
      .catch(()=>{
        console.log('실패함')
      })
    }}>버튼</button>
  )
}

 

🎶더보기 버튼 기능🎶

제가 구현해볼 기능은 버튼을 1번 클릭했을때 get요청을해서  https://codingapple1.github.io/shop/data2.json 데이터를 받아와주고 다시 1번 더 클릭 했을땐 https://codingapple1.github.io/shop/data3.json 데이터를 불러와 화면에 표시해줄것

 

<main.js>

import React from "react";
import { useState, useEffect } from "react";
import "../style/App.css";
import Data from "../data/data.js";
import axios from "axios";
import { Link } from "react-router-dom";


function Main() {
  let [item, setitem] = useState(Data);
  let [버튼, 버튼변경] = useState(0);
  return (
    <div>
      <div>
        {item.map((a, i) => {
          return (
            <div className="items" key={i}>
              <Link to={`/detail/${a.id}`}>
                <Card item={item[i]} i={i}></Card>
              </Link>
            </div>
          );
        })}
      </div>

      <button
        className="addBt"
        onClick={() => {
          버튼변경(버튼 + 1);
        }}
      >
        더보기
      </button>
      <Clicks 버튼={버튼} item={item} setitem={setitem}></Clicks>
    </div>
  );
}
function Clicks(props) {
  useEffect(() => {
    if (props.버튼 == 1) {
      axios
        .get("https://codingapple1.github.io/shop/data2.json")
        .then((result) => {
          let copy = [...props.item, ...result.data];
          props.setitem(copy);
        })
        .catch((err) => console.log(err));
    }
    if (props.버튼 == 2) {
      axios
        .get("https://codingapple1.github.io/shop/data3.json")
        .then((result) => {
          let copy = [...props.item, ...result.data];
          props.setitem(copy);
        })
        .catch((err) => console.log(err));
    }
  }, [props.버튼]);

  if (props.버튼 == 3) {
    return alert("상품이 더 없습니다");
  }
}
function Card(props) {
  return (
    <div>
      <img
        className="itemIMG"
        src={process.env.PUBLIC_URL + "img/clothes" + props.i + ".png"}
      ></img>
      <h4>{props.item.title}</h4>
      <p>{props.item.content}</p>
    </div>
  );
}

export default Main;

=>더보기버튼을 몇번 눌렀는지 값을 state에 저장해줌

=>기능이 잘 작동되는 것을 볼수있습니다 ㅎ-ㅎ

 

Axios에대해 더 많은것을 알고싶다면 밑 링크를 참고해주세요!

💛Requset 여러개 요청하기  (with Axios multiple request)

https://jssq2468.tistory.com/106?category=1011775 

requset 여러개 요청하기 (with Axios multiple request)

💛ajax,axios,fetchApi

https://jssq2468.tistory.com/80

클라이언트와 서버연결 -axios