react 서버통식 ajax2 응용문제

[서동현]

import logo from './logo.svg';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Button, Container, Nav, Navbar, Row, Col } from 'react-bootstrap';
import { useState } from 'react';
import data from './data.js';
import Detail from './routes/Detail.js';
import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom';
import axios from 'axios';

function App() {

  let [shoes,setShoes] = useState(data);
  let [buttonClick,setButton] = useState(0);
  let navigate = useNavigate();
 

  return (
    <div className="App">

      <Navbar bg="dark" variant="dark">
        <Container>
          <Navbar.Brand href="#home">Dongmay</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link onClick={() => navigate("/")}>Home</Nav.Link>
            <Nav.Link onClick={() => navigate("/detail")}>Detail</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
          </Nav>
        </Container>
      </Navbar>

      <Routes>

        <Route path='/' element={
          <div>
            <div className='main-bg' ></div>
            <Container>
              <Row>
                {
                  shoes.map(function (a, i) {
                    return (
                      <Col md={4}>
                        < img src={`https://codingapple1.github.io/shop/shoes${i+1}.jpg`} alt="shoes" width="80%" />
                        <h4>{shoes[i].title}</h4>
                        <p>{shoes[i].price}</p>
                      </Col>

                    )
                  })
                }

              </Row>

              <button onClick={() => {
                setButton(buttonClick+1);
                if(buttonClick == 1){
                  axios.get('https://codingapple1.github.io/shop/data2.json')
                  .then((결과) => {       //ajax 요청성공
                    const copy = [...shoes, ...결과.data]
                    setShoes(copy)
                  })
                  .catch(() => {           // ajax 요청실패
                  })
                }else if(buttonClick == 2){
                  axios.get('https://codingapple1.github.io/shop/data3.json')
                  .then((결과) => {       //ajax 요청성공
                    const copy = [...shoes, ...결과.data]
                    setShoes(copy)
                  })
                  .catch(() => {           // ajax 요청실패
                  })
                }else{
                  alert("더이상 상품이 없습니다.")
                }
               

              }}>버튼</button>

            </Container>
          </div>
        } />
        <Route path='/detail/:id' element={<Detail shoes={shoes} />} />
        <Route path='/event' element={<Event></Event>}>
          <Route path='one' element={<div>첫 주문시 쿠폰 증정</div>} />
          <Route path='two' element={<div>생일기념 쿠폰 받기</div>} />
        </Route>

      </Routes>

    </div>
  );
}
function Event() {
  return (
    <div>
      <h4>오늘의 이벤트</h4>
      <Outlet></Outlet>
    </div>
  )
}

export default App;

응용문제 1번 2번 했는데 두개의 사진이 렌더가 안되는데 이유 알수있을까요? 데이터는 제대로 받아온 것 같습니다. 그리고 코드 리뷰 부탁 드립니다!

[codingapple]

마지막 사진2개는 안만들어놨습니다 
상품이 10세트 더 있으면 if문도 10개나 작성해야할 것 같군요

[글쓴이]

글