axios 로 get 요청하기

서버에게 데이터 요청할때

유저가 그냥 데이터 달라고 하면 서버가 보내주지 않습니다.

서버에 데이터를 요청할때는 정확한 규격에 맞춰서 요청해야 합니다

1. 어떤 데이터인지 (URL 형식으로)

2. 어떤 방법으로 요청할지 (GET or POST)

잘 기재해야 데이터를 보내줍니다.

 

보통, 서버에서 데이터를 가져올때는 GET

        서버로 데이터를 보낼때는 POST 를 씁니다.

 

AJAX 란?

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

간단한 브라우저 기능을 말합니다.

(get 요청을 날리고 싶으면 주소창에, post요청을 날리고 싶으면 form 태그를 이용하면 되지만,

브라우저가 새로고침된다는 단점이 존재)

그래서 AJAX를 자주 씁니다.

 

AJAX로 GET,POST 요청을 하는 방법은 3가지 이고, 이중 택 1을 하면 됩니다

1. XMLHttpRequest 라는 옛날 문법쓰기

2. Fetch 라는 최신문법 쓰기 

3. axios 라는 외부 라이브러리 쓰기 ☜얘를 써보겟음

 

 

 

AJAX 요청하는 법

버튼누르면 제가 만든 서버로 ajax 요청을 해봅시다.

https://codingapple1.github.io/shop/data2.json 이 URL로 GET요청을 하면 상품 3개를 가져와줍니다.

여기로 요청해봅시다. 

 

import axios from 'axios'

function App(){
  return (
    <button onClick={()=>{
      axios.get('https://codingapple1.github.io/shop/data2.json').then((결과)=>{
        console.log(결과.data)
      })
      .catch(()=>{
        console.log('실패함')
      })
    }}>버튼</button>
  )
}

1. 상단에서 axios를 import 해오고

2. then() 안에는 콜백함수를 적어줍니다. then 다음에는 요청이 성공했을때 결과가 전달됩니다.

실패했을 때 실행할 코드는 .catch() 안에 적으면 됩니다.

then((결과)=>{console.log(결과)}) 결과라고만 콘솔을 찍으면

이런식으로 잡다한 api 가 다 나오기 때문에

then((결과)=>{console.log(결과.data)}) 로 입력해서 

data 값만 따로 확인할 수 있어야 합니다. 

 

 

 

추가문제

버튼을 누르면 서버에서 상품데이터 3개를 가져와서 메인페이지에 상품카드 3개를 더 생성해봅시다.

https://codingapple1.github.io/shop/data2.json

여기로 GET요청하면 상품데이터를 3개 더 보내줍니다.

html을 새롭게 생성할 것 없이 'state를 변경'해서 자동으로 렌더링되게 만들어줍니다

 

 

 

<풀이>

 let [shoes, setShoes]= useState(data);
 
 <Container>
      <Row>
        {
          shoes.map((a,i)=>{
          return(
            <Card shoes={shoes[i]} i ={i+1}></Card>
          )
          })
        }
      </Row>
    </Container> 
    <button onClick={()=>{
      axios.get('https://codingapple1.github.io/shop/data2.json')
      .then((result)=>{
      console.log(result.data)
      setShoes([...data,...result.data])
      })
      .catch(()=>{
        console.log('실패함ㅅㄱ')
    })}}>더보기 버튼</button>

일단 shoes의 초기값으로 설정되어있는 data는 기존의 상단 3가지 신발을 보여주었다.

setShoes에 기존 data + 새로운 data 로 변경된 값으로 교체해주면 되지 않을까?

 

그래서 바로, 구글에 배열 간의 병합을 검색했고

https://hianna.tistory.com/397

요런 꿀정보가 등장했다.

[...arr] 로 전개연산자를 사용해서 새롭게 병합된 배열을 만들면 될거라고 생각해따

setShoes([...data,...result.data]) 적어따

 

 

 

 

 

더보기 버튼 누르기 상품이 3개더 뜬닷.. ㅎㅎ

껄껄