리액트로 쇼핑몰 사이트 만들기 #6 ajax 로 서버와 통신하기

 

리액트에서는  ajax  를 사용하여 서버와 통신한다.

[ axios 설치하기 ]

 

터미널에 아래와 같이 작성하여 axios 를 설치한다.

npm install axios

 

import 한다.

import axios from 'axios'

 

---

 

1.  get 요청  

 

<button onClick={()=>{
    axios.get(' /*url 작성*/ ')
    .then((data /*파라미터작명*/ )=>{ data /*서버에서 가져온 데이터*/ })
}}>버튼</button>

만약 서버에서 가져온 데이터를 출력하고 싶다면?

<button onClick={()=>{
    axios.get(' /*url 작성*/ ')
    .then((data /*파라미터작명*/ )=>{ 
        data //서버에서 가져온 데이터
    })
}}>버튼</button>

만약 ajax 요청이 실패된다면?

( z.B. 인터넷 연결이 끊기거나, 서버가 꺼졌거나, url 주소가 잘못 되었거나 등 ) 

 catch  를 사용한다.

<button onClick={()=>{
    axios.get(' /*url 작성*/ ')
    .then((data)=>{ 
        data
    })
    .catch(()=>>{
        /* ajax 요청이 실패했을 때 실행할 코드를 적는다 */
    })
}}>버튼</button>

 

 

---

 

[ 응용 ]

 

서버에서 데이터를 가져와 신발 상품을 추가해보자!

 

 

콘솔창으로 확인해보면 본래 존재하는 데이터 값과 서버에서 추가로 가져온 데이터 값 둘 다 배열 안에 객체의 형태로 존재한다.

 

본래 = [ {a}, {b}, {c} ]

추가 = [ {d}, {e}, {f} ]

이 둘을 합쳐 [ {a}, {b}, {c} , {d}, {e}, {f} ] 로 만들어주어야하는데   

그러기 위해서 일단 각각의 []를 벗겨줘야 하고, 이는  spread 문법  을 사용하면 된다.

 

[ ...본래 ] = {a}, {b}, {c}

[ ...추가 ] = {d}, {e}, {f}

 

이므로 둘을 합치면

 

[ ...본래, ...추가 ] 

// [ {a}, {b}, {c}, {d}, {e}, {f} ]

 

 

 

따라서 코드로 구현해보면

{/* shoes 라는 state 에 데이터 추가 */}
<button onClick={()=>{
    axios.get('데이터 가져올 url')
    .then((result)=>{
        let copy = [...shoes, ...result.data];
        setShoes(copy);
    })
}}>더보기</button>

 

 

 

 

 

---

 

2.  post 요청

axios.post('url', { 서버로 전송하고 싶은 데이터 })

 

 

---

 

ajax 요청을 여러개 한다면?

axios.get('/url1')
axios.get('/url2')

라고 쓰기 보다는

Promise.all([ axios.get('/url1'), axios.get('/url2') ])
.then(()=>{
    ~코드~
})

 

---

 

원래 서버와 데이터를 주고받을 때는 문자만 가능하다.
array 나 object 자료는 주고 받지 못한다.

하지만  따옴표 안에 array 또는 object 자료를 작성  한다면 서버와 주고 받을 수 있다.

이것이 바로  json  이다.

axios 라이브러리가 알아서 문자열로 된 데이터를 array 또는 object 자료로 자동으로 변환해준다.

---

fetch 로도 get 요청과 post 요청 모두 가능하다.
하지만 fetch 를 사용하면, json 파일을 array 나 object 로 변환해주는 과정을 적어야한다.

fetch('url')
.then(result=>result.json()) // json 파일을 array 나 object 로 변환해주는 과정
.then(data=>{})