INDEX

1. AJAX 개념 설명
2. 버튼만들기 & 누르면 AJAX 요청하기
3. 오늘의 숙제

<aside> 💡 오늘의 숙제 버튼을 누르면 서버에서 상품데이터 3개를 가져와서 메인페이지에 상품카드 3개를 더 생성해보기 https://codingapple1.github.io/shop/data2.json 여기로 GET요청하면 상품데이터를 3개 더 보내줌

</aside>

1. AJAX 개념 설명

   npm install axios
   

   import './App.css';
   import { Navbar, Container, Nav } from 'react-bootstrap';
   import { useState } from 'react';
   import data from './data.js';
   import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom';
   import Detail from './route/Detail';
   import axios from 'axios';
   
   function App() {
     let [shoes] = useState(data);
   
     return (
       <div className='App'>
         <Navbar bg="dark" variant="dark">
           <Container>
             <Navbar.Brand href="/">Navbar</Navbar.Brand>
             <Nav className="me-auto">
               <Nav.Link href="/">Home</Nav.Link>
               <Nav.Link href="/cart">Cart</Nav.Link>
             </Nav>
           </Container>
         </Navbar>
         
         <Routes>
           <Route path="/" element={
             <>
               <div className='main-bg'></div>
               <div className="container">
                 <div className="row">
                   {
                     shoes.map((a, i)=>{
                       return (
                         <Product key={i} shoes={shoes[i]} i={i} />
                       )
                     })
                   }
                 </div>
                   **<button onClick={()=>{
                   axios.get("<https://codingapple1.github.io/shop/data2.json>")
                   .then((result) => {
                     console.log(result.data)
                   })
                   .catch(() => {
                     console.log("실패함")
                   })
                 }}>더보기</button>**
               </div>
             </>
           }/>
           <Route path="/detail/:id" element={<Detail shoes={shoes}/>}/>
           <Route path="*" element={<div>잘못된 접속입니다.</div>}/>
         </Routes>
       </div>
     );
   }
   
   function Product(props) {
     let navigate = useNavigate();
   
     return (
       <div className="col-md-4" onClick={() => {
         navigate('/detail/'+(props.i))
       }}>
         <img src={process.env.PUBLIC_URL + '/img/shoes'+(props.i+1)+'.jpg'} width="80%" />
         <h4>{props.shoes.title}</h4>
         <p>{props.shoes.content}</p>
         <p>{props.shoes.price}</p>
       </div>
     )
   }
   
   export default App;