[React] Ajax

새로고침 없이 get/post 요청 가능

get : 데이터 가져올 때

post : 데이터 보낼 때

 

서버와 문자열로만 주고 받기 가능 

-> axios 사용시 json 에 " { " " : " " } " 형태를 자동으로 array / object 로 변환해줌

 

import { Container,Row,Col} from "react-bootstrap";
import { Link } from "react-router-dom";
import axios from "axios";

function compare(me, you){
    return me.title.localeCompare(you.title)
   
}

function Main(props){
    const sort = ()=>{
        let copy = [...props.shoes];
        copy = copy.sort(compare);
        props.setShoes(copy);
    }

    return (
        <Container>
            <Row>
            {
                props.shoes.map((value,index)=>{
                    return (<Production key={index} shoeList ={value} i = {index}/>);
                })
            }
                <button onClick={sort}>정렬하기</button>
                <button onClick={()=>{
                    axios.get('https://codingapple1.github.io/shop/data2.json')
                    .then((res)=>{
                        let copy = [...props.shoes]                        
                        copy.push(...res.data); // 배열 합치기 == let copy = [...props.shoes , ...res.data]
                        props.setShoes(copy)
                    }) // get 요청 받아오기
                    .catch(()=>{console.log("실패")}) // url 틀렸을 경우 
                    
                    // post 데이터 전송 
                    //axios.post('url 주소',{보내고 싶은 값 => object 형식으로 작성})
                    // ex) axios.post('url',{name:"kim"})

                    /* 
                    ajax 동시에 여러개 요청하기
                    Promise.all([ axios.get('/url1'), axios.get('/url2')])
                    .then((res)=>{}) -> 성공 시 
                    .catch(()=>{}) -> 실패 시 
                    */
                    
                    /* 
                    fetch : 자동 변환 X -> 사용자가 직접 바꿔줘야 함
                    fetch('https://codingapple1.github.io/shop/data2.json')
                    .then(결과=>결과.json())
                    .then(data=>{})
                    */
                    
                }}>버튼</button>
            </Row>
        </Container>
    )
}

const Production = (props)=>{
    console.log(props.shoeList.id+":"+props.i)
    return(
      <Col md={4}>
            <img src={"https://codingapple1.github.io/shop/shoes"+(props.shoeList.id+1)+".jpg"} width="80%"/>
            <h4><Link to={"/detail/"+props.i+""}>{props.shoeList.title}</Link></h4>
            <p>{props.shoeList.price}</p>
      </Col>)
    }

export default Main;

버튼을 click 할 때마다 추가 + 추가할 페이지 없을 시 버튼 사라지기

import { Container,Row,Col} from "react-bootstrap";
import { Link } from "react-router-dom";
import axios from "axios";
import { useEffect, useState } from "react";

function compare(me, you){
    return me.title.localeCompare(you.title)
   
}

function Main(props){
    const sort = ()=>{
        let copy = [...props.shoes];
        copy = copy.sort(compare);
        props.setShoes(copy);
    }
    let [cnt, setCnt] = useState(2)
    let [chk, setChk] = useState(true)
    

    return (
        <Container>
            <Row>
            {
                props.shoes.map((value,index)=>{
                    return (<Production key={index} shoeList ={value} i = {index}/>);
                })
            }
                <button onClick={sort}>정렬하기</button>
                {chk && <button onClick={()=>{
                   
                    alert("로딩 중")
                    axios.get('https://codingapple1.github.io/shop/data'+cnt+'.json')
                    .then((res)=>{
                        let copy = [...props.shoes]                        
                        copy.push(...res.data); 
                        props.setShoes(copy)
                        setCnt(cnt+=1)
                    }) 
                    .catch(()=>{setChk(false)}) 
                      
                }}
                
                >버튼</button>}
                {!chk && <div className="alert alert-warning">페이지가 없습니다</div> }
            </Row>
        </Container>
    )
}

const Production = (props)=>{
    return(
      <Col md={4}>
            <img src={"https://codingapple1.github.io/shop/shoes"+(props.shoeList.id+1)+".jpg"} width="80%"/>
            <h4><Link to={"/detail/"+props.i+""}>{props.shoeList.title}</Link></h4>
            <p>{props.shoeList.price}</p>
      </Col>)
    }

export default Main;