[React] Ajax로 서버와 통신하기 (get, post)

서버란?

 

데이터 요청을 하면 유저에게 데이터를 보내주는 간단한 프로그램

 

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

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

 

데이터를 가져올 때는 보통 GET 고르면 되고

데이터를 서버로 보낼 때는 POST 고르면 됩니다. 

그리고 어떤 데이터를 보고싶은지 URL만 잘 기재

 

AJAX란?

 

서버에 GET, POST 요청을 할 때 새로고침 없이 

데이터를 주고받을 수 있게 도와주는

간단한 브라우저 기능

 

 

ajax를 쓰려면 3가지 방법이 있다. 

1. XMLHttpRequest

2. fetch()

3. axios

 

그 중에서 axios 방법의 사용 예시를 적어보겠습니다. 

 

axios 방법 (get)

 

1. ctrl + c로 작업 끝내고 terminal에 npm install axios로 axios 라이브러리 설치

2.

import axios from 'axios';

 

3. ajax를 이용한 GET 요청은 axios.get('url')

<button onClick= {()=> {
    axios.get('url')
    .then((결과)=>{
      let copy =[...shoes, ...결과.data]
      setShoes(copy)

4. 예외처리 추가

 

<button onClick= {()=> {
    axios.get('url')
    .then((결과)=>{
      let copy =[...shoes, ...결과.data]
      setShoes(copy)

    })

    axios.post('/url', {name : 'Seo'})


    .catch(()=> {
      console.log('실패했습니다.')
    })
  }}>가져오기 버튼</button>

 

동시에 ajax 요청 여러개 하는방법 

Promise.all( [axios.get('URL1'), axios.get('URL2')] )

 

axios 방법 (서버로 데이터 전송하는 Post 요청) 

 axios.post('/url', {name : 'Seo'})

 

 

출처: 코딩애플 https://codingapple.com/

코딩애플 온라인 강좌 - 개발자도 단기완성!