강의 응용문제

[이태원]

안녕하세요 리액트 강의 듣고 있는 사람입니다.

먼저 좋은 강의 들려주셔서 감사합니다.

다름이 아니라 강사님께서 내주신 응용문제에 대한 해답은 따로 제공하지 않은지가 궁금합니다.

만약 제공하지 않으신다면 3번째 문제에 대한 답을 알 수 있을까 해서 문의드립니다.

제가 응용문제 1,2번 짠 코드는 아래와 같으며, usestate를 통해 alert를 켰다 껐다 하려고 했는데 코드가 정상적으로 돌아가지 않아 문의드립니다.

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

function App() {
  let [shoes, setShoes] = useState(data);
  let navigate = useNavigate(); // 페이지 이동함수
  let [count, setCount] = useState(0);
  let [more, setMore] = useState(true);
  let [loadalert, setLoadalert] = useState(true);

  return (
    <div className="App">
      <Navbar bg="dark" variant="dark">
        <Container>
          <Navbar.Brand href="#home"> Shopping Mall</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link
              onClick={() => {
                navigate("/");
              }}
            >
              Home
            </Nav.Link>
            <Nav.Link
              onClick={() => {
                navigate("/detail");
              }}
            >
              Detail
            </Nav.Link>
            <Nav.Link
              onClick={() => {
                navigate("/about");
              }}
            >
              About
            </Nav.Link>
            <Nav.Link
              onClick={() => {
                navigate("/event");
              }}
            >
              event
            </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 <Card shoes={shoes[i]} i={i}></Card>;
                  })}
                </div>
              </div>
            </>
          }
        ></Route>
        <Route
          path="/detail/:id"
          element={<Detail shoes={shoes}></Detail>}
        ></Route>
        <Route path="/event" element={<Event></Event>}>
          <Route path="one" element={<p>첫 주문시 양배추즙 서비스</p>}></Route>
          <Route path="two" element={<p>생일기념 쿠폰받기</p>}></Route>
        </Route>
        <Route path="/about" element={<About></About>}>
          <Route path="member" element={<div>멤버</div>}></Route>
          <Route path="locoation" element={<div>위치정보</div>}></Route>
        </Route>
        {/* <Route path='*' element={<div>없는페이지</div>}></Route> */} //
        이외에 전부다
      </Routes>

      {more == true ? (
        <button
          onClick={() => {
            {
              loadalert == true ? alert("로딩중입니다.") : null;
            }
            console.log("a");
            setCount(count + 1);
            if (count == 0) {
              axios
                .get("https://codingapple1.github.io/shop/data2.json")
                .then((data2) => {
                  let copy = [...shoes, ...data2.data];
                  setShoes(copy);
                  setLoadalert(false);
                  {
                    loadalert == true ? alert("로딩중입니다.") : null;
                  }
                })
                .catch(() => {
                  alert("실패했습니다.");
                  setLoadalert(false);
                  {
                    loadalert == true ? alert("로딩중입니다.") : null;
                  }
                });
            } else if (count == 1) {
              axios
                .get("https://codingapple1.github.io/shop/data3.json")
                .then((data2) => {
                  let copy = [...shoes, ...data2.data];
                  setShoes(copy);
                  setLoadalert(false);
                  {
                    loadalert == true ? alert("로딩중입니다.") : null;
                  }
                })
                .catch(() => {
                  alert("실패했습니다.");
                  setLoadalert(false);
                  {
                    loadalert == true ? alert("로딩중입니다.") : null;
                  }
                });
            } else {
              setMore(false);
              <div>상품 없음</div>;
            }
          }}
        >
          더보기
        </button>
      ) : null}
    </div>
  );
}

function About() {
  return (
    <div>
      <h4></h4>
      <Outlet></Outlet>
    </div>
  );
}

function Event() {
  return (
    <div>
      <h4></h4>
      <Outlet></Outlet>
    </div>
  );
}

function Card(props) {
  return (
    <div className="col-md-4">
      <img
        src={
          "https://codingapple1.github.io/shop/shoes" + (props.i + 1) + ".jpg"
        }
        width="80%"
      ></img>
      <h4>{props.shoes.title}</h4>
      <p>{props.shoes.price}</p>
    </div>
  );
}

function Loading(props) {
  return console.log("a");
}

export default App;

[codingapple]

state변경함수는 다른코드보다 늦게 동작해서 밑의 코드가 먼저 실행됩니다
나중에 나올 setstate async어쩌구 강의를 참고합시다

[글쓴이]

글