[코딩애플;React]Ajax

1.Ajax

서버란: 유저가 데이터 요청 시 데이터를 보내주거나 가져오는 간단한 프로그램

서버에 데이터를 요청할 때는 어떤 데이터인지 url을 기재하고, 어떤 방법으로 가져올지 결정해야함(get/post)

-get은 데이터를 가져오고 싶을 때/  post 는 데이터를 전송하고 싶을 때.

->form태그에 직접 <form action="요청할url" method="post"> 이런식으로 해도 가능하지만

      단점은 브라우저가 새로고침 됨.

 

AJAX는 서버에 GET, POST요청 시 새로고침 없이 데이터를 주고받을 수 있는 간단한 브라우저 기능.

 -요청 방법 세 가지

1. XMLHttpRequest라는 옛날 문법 쓰기

2. fetch() 라는 최신 문법 쓰기

3. axios 같은 외부 라이브러리 쓰기 : 터미널에 npm install axios 입력 하고 상단에 아래와 같이 입력

import axios from 'axios'

 

2.Ajax 서버 가져오기

-axios.get(URL)  : URL요청

-데이터를 가져온 결과는 결과.data

-인터넷이 안되거나 URL이 이상하여 실패할 때 코드는 .catch()안에 적기

      <button onClick ={()=>{

              axios.get('https://codingapple1.github.io/shop/data2.json')

              .then((결과)=>{    

                data.map(function(a,i){

                return(

                  <Card shoes={shoes[i] } key={i}/>

                )

              })})

              .catch(()=>{

                console.log('실패')

              })

            }}>더보기</button>

 

 

📚더보기 버튼 누르면 새로운 데이터 가져와서 보여주기

            <button onClick ={()=>{

              axios.get('https://codingapple1.github.io/shop/data2.json')

              .then((결과)=>{    

                let copy =[...shoes, ...결과.data];

                setShose(copy);

              })

              .catch(()=>{

                console.log('실패')

              })

            }}>더보기</button>

 

📚더보기 버튼 더 누르면 다른 새로운 데이터 가져와서 보여주기

 let [click, setClick] =useState(1);

 

 <button onClick ={()=>{

              setClick(click+1)

              if(click === 1){

                axios.get('https://codingapple1.github.io/shop/data2.json')

                .then((결과)=>{    

                  let copy =[...shoes, ...결과.data];

                  setShose(copy);

                })

                .catch(()=>{

                  console.log('실패')

                })

              }else if(click === 2 ){

                axios.get('https://codingapple1.github.io/shop/data3.json')

                .then((결과)=>{    

                  let copy =[...shoes, ...결과.data];

                  setShose(copy);

                })

                .catch(()=>{

                  console.log('실패')

                })

              }

             

         

            }}>더보기</button>

 

 

3.Ajax 서버 POST요청 보내기

       axios.post('URL', {name : 'kim'})

               .then(()=>{'성공했을 때 결과'})

               .catch(()=>{'실패했을 때 결과'})

 

요청을 여러개 하려면

    Promise.all([axios.post('/url1'), axios.post('/url2')])

              .then(()=>{'성공했을 때 코드'})

 

: 서버는 JSON형태로 주고 받고 객체,배열 상태로 원래는 주고 받지 못하지만 axios 라이브러리는 JSON을 객체나 배열로 변환 작업을 자동으로 해줌.

 

-fetch 사용하기

 fetch('URL').then(결과 => 결과.json()).then((결과) => { console.log(결과) } )

 

바닐라 자바스크립트 문법인 fetch()로도 get/post가능함.

하지만 자동으로 Json파일을 객체,배열로 바꿔주지 않으므로 따로 바꿔주는 작업이 필요함.

 

⚠️ajax로 가져온 데이터들 html로 꽂으면 에러날 때

:ajax요청 보다 html랜더링이 더 빠른 경우. state안에 무언가 있으면 보여달라고 if문 작성하기.