react part2에 서버통신 숙제질문.

[서동현]

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 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>

      <span style="color: #ff0000;"><Routes></span>

<span style="color: #ff0000;">        <Route path='/' element={</span>
<span style="color: #ff0000;">          <div></span>
<span style="color: #ff0000;">            <div className='main-bg' ></div></span>
<span style="color: #ff0000;">            <Container></span>
<span style="color: #ff0000;">              <Row></span>
<span style="color: #ff0000;">                {</span>
<span style="color: #ff0000;">                  shoes.map(function (a, i) {</span>
<span style="color: #ff0000;">                    return (</span>
<span style="color: #ff0000;">                      <Col></span>
<span style="color: #ff0000;">                        < img src={shoes[i].img} alt="shoes" width="80%" /></span>
<span style="color: #ff0000;">                        <h4>{shoes[i].title}</h4></span>
<span style="color: #ff0000;">                        <p>{shoes[i].price}</p></span>
<span style="color: #ff0000;">                      </Col></span>

<span style="color: #ff0000;">                    )</span>
<span style="color: #ff0000;">                  })</span>
<span style="color: #ff0000;">                }</span>

<span style="color: #ff0000;">              </Row></span>

<span style="color: #ff0000;">              <button onClick={() => {</span>
<span style="color: #ff0000;">                axios.get('https://codingapple1.github.io/shop/data2.json')</span>
<span style="color: #ff0000;">                  .then((결과) => {</span>
<span style="color: #ff0000;">                    const copy = [...shoes, ...결과.data]</span>
<span style="color: #ff0000;">                    setShoes(copy)</span>
<span style="color: #ff0000;">                    console.log(...shoes)</span>
<span style="color: #ff0000;">                  })</span>
<span style="color: #ff0000;">                  .catch(() => {</span>
<span style="color: #ff0000;">                    console.log('실패함.')</span>
<span style="color: #ff0000;">                  })</span>

<span style="color: #ff0000;">              }}>버튼</button></span>

<span style="color: #ff0000;">            </Container></span>
<span style="color: #ff0000;">          </div></span>
        } />
        <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;

버튼을 눌러 복사된 state안에 서버에서 받아온 데이터를 저장하고 렌더링하면
6개의 사진이 1열로 나옵니다. 3개씩 끊기지 않습니다.

[codingapple]

<Col>말고 <Col md={3}> 이런거 사용합시다

[글쓴이]

글