[React] axios 라이브러리 사용하기

📩 리액트에서 서버와 통신하려면 ajax를 사용하자

기존 HTML에서 서버와 통신하려면 Get과 Post를 사용했다.

form 태그 안에 넣어서 인풋값으로 얻은 데이터들📩을 특정 주소로 전달할 때

<form action="요청할url" method="post">

이런 식으로 주로 사용했다.

근데 이러면 브라우저가 새로고침 되는 문제가 발생한다.

 

또한 기본적으로 자바스크립트는 동기 처리 방식인데, 이러한 방식은 서버에서 받아올 데이터 양이 많을 시 브라우저 전체의 로딩 속도를 늦추기 때문에 기본적으로 데이터 송수신은 비동기 처리방식을 채택하고 있다.

 

ajax는 서버에 GET, POST 요청을 할 때 새로고침 없이(비동기 방식으로) 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능이다.

AJAX로 GET/POST요청하려면 방법 3개 중 택1 하면 된다.

 

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

3번이 가장 편해서 리액트로 작업할 땐 주로 3번을 사용한다.

---

1️⃣ axios 라이브러리 사용하기

터미널 열어서

npm install axios

하면 설치 끝이다.

 

2️⃣ Get 요청하기

import axios from 'axios'

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

1. axios를 쓰려면 상단에서 import해오고
2. axios.get(URL) 이러면 그 URL로 GET요청이 됩니다.
3. 데이터 가져온 결과는 결과.data 안에 들어있습니다.

그래서 위의 버튼 누르면 서버에서 가져온 데이터가 콘솔창에 출력됩니다.

인터넷이 안되거나 URL이 이상하면 실패하는데 실패했을 때 실행할 코드는 .catch() 안에 적으면 됩니다.

 

3️⃣ POST 요청하기

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

이거 실행하면 서버로 { name : 'kim' } 자료가 전송됩니다.

완료시 특정 코드를 실행하고 싶으면 이것도 역시 .then() 뒤에 붙이면 됩니다.

 

4️⃣ 동시에 AJAX 요청 여러개 날리려면

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

이러면 URL1, URL2로 GET요청을 동시에 해줍니다.

둘 다 완료시 특정 코드를 실행하고 싶으면 .then() 뒤에 붙이면 됩니다.

---

❓JSON이 뭐에요?

원래 서버와 문자자료만 주고받을 수 있습니다

object/array 이런 자료형태는 못주고 받는다는 말인데, 그걸 가능하게 할 수 있는데 해주는게 JSON입니다.

JSON은 object/array 같은 자료를 따옴표로 감싸준 형태를 말합니다.

 

"{"name" : "kim"}" 이걸 JSON 이라고 합니다.

JSON은 문자 취급을 받기 때문에 서버와 자유롭게 주고받을 수 있습니다.

axios 라이브러리는 JSON -> object/array 변환작업을 자동으로 해주기 때문에 fetch() 문법 보다 편리합니다.

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

쌩자바스크립트 문법인 fetch() 를 이용해도 GET/POST 요청이 가능한데, 그건 JSON을 object/array로 자동으로 안바꿔줘서 위와 같이 직접 바꾸는 작업이 필요합니다.

마음에 들면 써도 상관 없지만 근데 리액트에서는 편리한 axios가 있으므로 axios를 주로 사용합니다.