axios 로 데이터 불러오기

3가지 문제를 풀어보았다.

 

응용1, 버튼 2번 누르면 7,8,9 상품 가져와서 보여주려면?

- count 라는 state를 사용했다.

- axios.get 요청 하는 부분이 길어서 getMoreShoes 라는 함수를 위에 선언하여

가져다 썼다. 함수를 선언하는 위치가 중요하다고 느낀다.

아래에 app 아래에서 선언하였더니

각종 state들이 undefined 로 에러가 떴다. 

 

응용2. 버튼을 3번 누르면 더 상품이 없다고 안내문을 띄우려면?
let [count, setCount] = useState(0); 해주고
클릭이벤트 발생시 setCount 하나씩 증가해주고
count가 1일때 data2, count 2일때 data3, count 3일때 alert창 띄워줌

 

응용3, 버튼 누른 직후에 로딩중 글자를 주변에 띄우고 싶을때
일단 먼저 로딩 ui를 아래 컴포넌트들 처럼 선언해준다.

그리고 로딩 ui를 붙이고 싶은 app 함수의 버튼 아래 부분에다가 삼항연산식을 적어준다

더보기 버튼을 클릭한 뒤 사진이 보이기 전까지는 로딩창이 뜨고, 다시 사진이 보이면 숨겨지는 식으로 코드를 적어준다

setLoading(true) => setLoading(false) => setLoading(true)

 

추가+

그런데 실제로 실행해보니 axios 요청이 빨라서 로딩창이 나올 시간이 없었다 ... ㅎ

그래서 일부러 시간을 벌어주는 함수인 setTimeout으로 3초간격을 두어서 로딩창이 뜨도록 했다

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

function App() {
  
  let [shoes, setShoes]= useState(data);
  let navigate = useNavigate();
  let [count , setCount] = useState(0);
  let [loading, setLoading] = useState(false)

  function getMoreShoes(url){
    axios.get(url)
          .then((result)=>{
          console.log(result.data)
          setShoes([...shoes,...result.data])
          //로딩중ui 숨기기
          setLoading(false)
          })
          .catch(()=>{
          console.log('실패함ㅅㄱ')
          //로딩중ui 숨기기
          setLoading(false)
        })
  }

  return (
    <div className="App">

    <br />
      <Navbar bg="light" variant="light">
        <Container>
          <Navbar.Brand href="#home">ShoeShop</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link onClick={()=>{navigate('/')}} href="#home">Home</Nav.Link>
            <Nav.Link onClick={()=>{navigate('/detail')}}href="#features">Detail</Nav.Link>
          </Nav>
        </Container>
      </Navbar>

    <Routes>
    <Route path ="/" element ={
    <>
    <div className='main-bg'></div>
    <Container>
      <Row>
        {
          shoes.map((a,i)=>{
          return(
            <Card shoes={shoes[i]} i ={i+1}></Card>
          )
          })
        }
      </Row>
    </Container> 
    <button onClick={()=>{ //버튼 2회 누를때는 7,8,9번 상품을 가져오려면?
      
      if(count === 0){
        //로딩중ui 띄우기
        setLoading(true)
        setTimeout(()=>{
          getMoreShoes('https://codingapple1.github.io/shop/data2.json')
          setCount(1)
        }, 3000)
      }else if(count ===1){
        setLoading(true)
        setTimeout(()=>{
          getMoreShoes('https://codingapple1.github.io/shop/data3.json')
          setCount(1)
        }, 3000)
      }else{
        alert('더 상품이 없다')
      }
      }}>더보기 버튼</button>
      {/* 로딩ui를 보여주는곳 */}
      {
        loading === true ? <LoadingUI/> : null
      }
    </>
   }/>

    <Route path ="/detail/:id" element ={<Detail shoes={shoes}/>}/>

    <Route path="/about" element={<About/>}>
     <Route path="member" element={<div>멤버임</div>}></Route>
     <Route path="location" element={<div>위치정보임</div>}></Route>
    </Route>

   <Route path="/event" element ={<Event/>}>
    <Route path="one" element={<div>첫 주문시 양배추즙 서비스</div>}></Route>
    <Route path="two" element ={<div>생일기념 쿠폰받기</div>}></Route>
   </Route>
 
   </Routes>
  
    </div>
  );
}
function LoadingUI(){
  return(
    <div>
      <img src="https://cdn-icons-png.flaticon.com/512/4990/4990502.png" alt="로딩중입니다" />
      <p>로딩중입니다</p>
    </div>
  )
}
function Card(props){
  return (
  <div className="col-md-4">
  <img src={"https://codingapple1.github.io/shop/shoes"+props.i+".jpg"} width="80%" />
  <h4>{ props.shoes.title }</h4>
  <p>{ props.shoes.price }</p>
</div>
)
}

function About(){
  return(
    <div>
    <h4>회사정보임</h4>
    <Outlet></Outlet>
    </div>
  )
}

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