[shop-project] Ajax & axios라이브러리

🌈 Ajax 란?

• Asynchronous JavaScript And XML의 약자로, 말 그대로 JavaScript와 XML을 이용한, 클라이언트와 서버간에 XML 데이터를 주고받는 기술.
  (= 서버에 새로고침 없이 요청을 할 수 있게 도와주는 기술)
• Javascript의 라이브러리 중 하나이다.
• 서버에 요청하는 종류에는 여러가지가 있다
  • GET요청: 특정 페이지 / 자료 읽기(페이지 불러오기 등)
  • POST요청: 서버로 중요 정보 전달(로그인, 글 포스팅 등)
  • DELETE, PUT 등

🍎 Ajax 사용 방법 3가지

1) jQuery 설치해서 $.ajax() 쓰는 방법
2) axios 설치해서 axios.get() 쓰는 방법
3) 쌩자바스크립트 fetch() 쓰는 방법

🌈 axios 란?

• HTTP 클라이언트 라이브러리 중 하나이다.

🍎 axios 라이브러리 설치 및 사용 방법

1) 라이브러리 설치
npm install axios 터미널에 설치

2) 라이브러리를 사용하는 페이지 상단에 import 해주기
import axios from 'axios';

3) return 코드 내에서 서버에 ajax요청 하기

🐻 axios 자료 받아오는 과정 정리

import React, { useState } from 'react';
import axios from 'axios';
import Data from './data.js';

function App() {

  return (
  // 버튼을 누르면 서버에 get 요청을 할 것이기 때문에, onClick 이벤트 내 콜백함수에 axios 적용
  <button onClick={ () => {

    axios.get('https:// server URL.json');
    .then( () => { // ajax 요청이 성공했을 때 실행할 코드 } )  
    .catch( () => { // ajax 요청이 실패했을 때 실행할 코드 } )  

  }}
  )
}



// axios로 가져온 전체 자료 출력 하는 법 (step 1)
➡   .then( (가져온자료) => { } )

axios.get('https:// server URL.json');
.then( (result) => { 
  console.log(result)  // url에서 가져온 모든 자료를 보여준다
  } )  
.catch( () => { // ajax 요청이 실패했을 때 실행할 코드 } )  



// axios로 가져온 자료 출력 하는 법 (step 2)
axios.get('https:// server URL.json');
.then( (result) => { 
  console.log(result.data)  // 실제로 받아온 data만 출력할 때
  } )  
.catch( () => { // ajax 요청이 실패했을 때 실행할 코드 } )  

🐻 버튼을 누르면 서버에 ajax요청 되는 코드 만들기

import React, { useState } from 'react';
import axios from 'axios';
import Data from './data.js';

function App() {

  let [shoes, setShoes] = useState(Data)

  return (
  // 버튼을 누르면 서버에 get 요청을 할 것이기 때문에, onClick 이벤트 내 콜백함수에 axios 적용
  <button onClick={ () => {

    axios.get('https:// server URL.json');
    .then( () => {

      // 서버에서 받아온 데이터를 기존 shoes state에 추가하기 위한 코드
      setShoes([...shoes, ...result.data])
      // 기존 배열 deepcopy와 새로 추가할 데이터를 함께 쓰는 방법. 일종의 테크닉

    } )  
    .catch( () => { // ajax 요청이 실패했을 때 실행할 코드 } )  

  }}
  )
}

🐻 Detail컴포넌트 로드 시, ajax로 데이터를 받아오는 코드

import React, { useEffect } from 'react';
import axios from 'axios';

function Detail() {

  useEffect( () => {

    // Detail 컴포넌트가 "등장" 할때 ajax요청됨
    axios.get()

  }, []) // [ ]를 해주었기 때문에 "업데이트"될 때는 ajax요청 안된다

  return ( )  
}

💡 POST 요청할 때

 axios.post( '서버url', { id: boma@naver.com , pw: 1234 } )