React : AJAX로 서버와 통신하기 (ajax, axios)

서버에 GET/POST 데이터 요청하기

서버에 데이터를 요청할 때는 아래같이 정확한 규격에 맞추어 요청해야 한다.

1. 어떤 데이터인지 (URL)
2. 어떤 방법으로 요청할지 (GET : 서버에서 데이터를 가져올 때 / POST : 데이터를 서버로 보낼 때)

요청하는 법

• POST 요청을 날리고 싶으면 <form action="요청할 url" method="post">태그를 이용한다.
• GET 요청을 날리고 싶으면 브라우저 주소창에 URL을 적는다.

그러나 이 방법은 브라우저가 새로고침이 된다는 단점이 있다.

---

AJAX

그래서 새로고침 없이 데이터를 주고받을 수 있게 도와주는 브라우저 기능인 AJAX를 쓴다.

AJAX로 GET/POST 데이터 요청하는 법

1. XMLHttpRequest라는 옛날 문법 쓰기
2. fetch()라는 최신 문법 쓰기
3. axios같은 외부 라이브러리 쓰기

---

axios

설치

설치하려면 아래 명령어를 터미널에 입력한다.

npm install axios

사용

import axios from 'axios';

function Main(props){
  return (
    <>
    <button className="" onClick={()=> {
      axios.get('https://codingapple1.github.io/shop/data2.json')
      .then((data)=>{ console.log(data) })
      .catch(()=>{ console.log('fail') })
    }}>더보기</button>
    </>
  )
}

• 상단에 axios를 import한다
• axios.get('URL') 하여 해당 URL로 GET 요청을 보낸다
• 데이터를 가져온 결과는 data 안에 들었다 (해당 콜백함수 안에서만 작동함, 이름 맘대로 바꿔도 됨)

요청이 실패할 경우 이유

인터넷이 안되거나 서버가 죽었거나 URL을 잘못 작성했거나...  그럴 땐 .catch() 안에 실패시 실행할 코드를 적으면 된다.

---

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