[React] ajax

AJAX

: 서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 브라우저 기능

=> 실습에서는 axios 사용

 

 

 

설치

npm install axios

 

 

버튼을 눌러서 GET 요청 보내기

import axios from 'axios'

<button onClick={()=>{
  axios.get('url 주소!')
  .then((res)=>{ 
  	// 요청 성공 시 실행되는 함수
  })
  // 요청 실패 시 실행되는 함수
  .catch((err)=>{console.log(err)})  
}}>더보기</button>

 

 

 

 

POST 요청 보내기

axios.post('URL', { 딕셔너리 데이터 })
.then((res)=>{
  // 요청 성공 시 실행될 코드
})
.catch(()=>{
  // 요청 실패 시 실행될 코드
})

 

 

 

 

동시에 AJAX 여러개

Promise.all( [axios.get('URL1'), axios.get('URL2')] )
.then((res)=>{
  // 요청 성공 시 실행될 코드
})
.catch(()=>{
  // 요청 실패 시 실행될 코드
})

 

 

 

axios 라이브러리는 JSON <-> object, array 변환 작업을 자동으로 해줌

fetch() 함수는 이를 직접 변환해 주어야 함

fetch('URL')
// 변환
.then(res => res.json())
.then((res) => { console.log(res) } )

 

 

 

 

 

axios 이용한 실습

응용 1. 버튼 2번 누르면 상품 가져와서 뿌리기

응용 2. 버튼을 3번 누르면 더보기 버튼 숨기기

응용 3. 버튼을 누른 직후에는 "로딩중" 띄우기

// App.js
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import bg from './img/bg.jpg'
import { useState } from 'react';
import data from './data'
import Detail from './routes/Detail.js'
import {Button, Navbar, Container, Nav} from 'react-bootstrap'
// 라우터 import
import { Route, Routes, Link, useNavigate, Outlet } from 'react-router-dom';
// axios
import axios from 'axios'

function App() {

  let [shoes, setShoes] = useState(data)
  // 페이지 이동 도와줌
  let navigate = useNavigate();
  let [count, counting] = useState(0);
  let [show, setShow] = useState(true);
  let [isLoading, setIsLoading] = useState(false)

  return (
    <div className="App">
      {/* 네비게이션 */}
      <Navbar bg="light" variant="light">
        <Container>
        <Navbar.Brand href="#home">ShoeShoe</Navbar.Brand>
        <Nav className="me-auto">
          <Nav.Link onClick={()=>{ navigate('/') }}>Home</Nav.Link>
          <Nav.Link onClick={()=>{ navigate('/detail') }}>Detail</Nav.Link>
          <Nav.Link>Cart</Nav.Link>
        </Nav>
        </Container>
      </Navbar>

      <Routes>
        <Route path="/" element={
          <div>
            <div className='main-bg' style={{ backgroundImage : 'url('+ bg +')'}}></div>
            <div className="container">
              <div className="row">
                {
                  shoes.map((shoe, i)=>{
                    return (
                      <Card shoe={shoe} i={i} key={i}/>
                    )
                  })
                }
              </div>
            </div>
            { isLoading ? <Loading/> : null }
            { show? <button onClick={()=>{
              // 로딩중 UI 띄우기
              setIsLoading(true)
              // 더이상 상품이 없으면 더보기 버튼 숨기기
              if (count > 1) {
                setShow(false);
              } else {
                counting(count+1)
              }
              axios.get(`https://codingapple1.github.io/shop/data${count+2}.json`)
              .then((res)=>{ 
                console.log(res.data)
                let copy = [...shoes, ...res.data]
                setShoes(copy)
                // 로딩중 UI 숨기기
                setIsLoading(false)
              })
              .catch((err)=>{
                console.log(err)
                // 로딩중 UI 숨기기
                setIsLoading(false)
              })  
            }}>더보기</button> : null}
          </div>}/>
        
        {/* 상품 상세 정보 페이지 */}
        <Route path="/detail/:id/" element={<Detail shoes={shoes} />}/>
        
        {/* 회사 정보 페이지 */}
        <Route path="/about" element={<About/>}>
          <Route path="member" element={<div>member</div>}/>
          <Route path="location" element={<div>location</div>}/>
        </Route>

        {/* 이벤트 정보 페이지 */}
        <Route path="/event" element={<Event/>}>
          <Route path="one" element={<div>첫 주문시 배송비 무료</div>}/>
          <Route path="two" element={<div>생일기념 쿠폰 받기</div>}/>
        </Route>

      </Routes>

      
    </div>
  );
}

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

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

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

function Loading() {
  return (
    <div className="alert alert-primary">
      로딩중,,
    </div>
  )
}

export default App;

 

 

 

 

 

우리 크로스핏 지켜주는 아기 호랑이에게 내 인생 첫 츄르 줘따,,, ㅋㅋㅋㅋ 다소 공격적이어서 손 먹히는 줄 알았잔아..ㅎ