[React] AJAX, 서버와 통신

• 서버: 사용자가 데이터를 달라고 요청을 하면 데이터를 보내주는 간단한 프로그램
• GET방식 : 서버에서 데이터를 가져올 때
• POST방식 : 데이터를 서버로 보낼 때

 

서버에 데이터를 요청할 때

1. 어떤 데이터인지(URL 형식으로)
2. 어떤 방법으로 요청할지( GET이나 POST)

 

GET / POST 요청

• GET : 브라우저 주소창에 URL 기재
• POST : <form action="요청할URL" method="post">
• ❗ GET, POST 요청을 이런식으로 보내면 브라우저가 새로고침 됨

 

---

AJAX

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

 

AJAX 사용방법

• 1LHttpRequest라는 옛날 문법 쓰기
• fetch() 라는 최신 문법 쓰기
• axios 같은 외부 라이브러리 쓰기 

axios 같은 외부 라이브러리 쓰기  - 우선 설치!

 

- 터미널에서

   npm install axios   

 

- 상단에 axios를 import 해오기

• axios.get(URL) / axios.post(URL)
• 성공/실패시 실행할 코드

 

import axios from 'axios';
 <button onClick={() => {
    console.log('로딩중...');

    /* AJAX로 데이터 받을 때 */
    axios.get('데이터 받을 URL')
    .then((result) => {
	  console.log(result.data);
      console.log('로딩 완료');
    })
    .catch(() => {
      console.log('실패!')
    })

    /* AJAX로 데이터 보낼 때 */
    axios.post('/데이터 보낼 URL', {데이터명 : '값'})
    
}}>버튼</button>

 

📘 더보기 버튼을 누르면 상품 추가 진열

import { useState } from 'react';
import axios from 'axios';

function App() {

  let [shoes, setShoes] = useState(data);
  
  return(
    <div className="App">
    <Routes>
      <Route path="/" element={
        <>
          <button onClick={() => {
            axios.get('https://codingapple1.github.io/shop/data2.json')
            .then((result) => {
              let copy = [...shoes, ...result.data];
              setShoes(copy);
            })
            .catch(() => {
              console.log('실패!')
            })

            axios.post('/데이터 보낼 URL', {데이터명 : '값'})
          }}>버튼</button>
        </>
      } />
      ...

 

 

AJAX로 데이터 여러개 동시에 받을 떄

• 여러개 요청이 다 성공했을 때의 코드를 짜고 싶으면 사용

Promise.all([ axios.get('/URL1'), axios.get('/URL2') ])
.then(() => {
  console.log('성공~')
})

 

❗ 원래 서버와는 문자만 주고받기 가능

• 문자가 아닌 건(ex) array, object) 따옴표("" '') 쳐서 사용)
• JSON 데이터 사용 ex)  "{ "name" : "Kim"}"

 

+ axios 사용없이 자바스크립트의 fetch 사용해서 데이터 전달도 가능

❗ 대신, JSON -> array/object 변환과정 필요

fetch('URL')
// .then( 결과 => 결과.json() )
  .then( data => { } )