[React] 📤 Ajax(axios)를 이용한 예제

🟨 Ajax란

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

• 서버란? 데이터를 요청하면 데이터를 보내주는 것을 말한다.

🟨 Ajax 데이터 요청방법

1. GET, POST 중 어떤 방법으로 보낼 지 선택
2. URL 형식으로 데이터를 요청해서 받아올 건 지 또는 전송할 것인 지 선택

데이터를 요청해서 받아올 때는 get사용, 데이터를 전송할 땐 post를 사용한다 URL형식을 잘 지켜서 보내야 한다. 지키지 않으면 데이터를 받아올 때나 보낼 때나 기능이 잘 작동하지 않을 수 있다

🟨 Ajax 데이터 요청 방법 3가지

(1) XMLHttpRequest 문법
(2) fetch() 문법
(3) axios 외부 라이브러리

• XMLHttpRequest를 과거에는 잘 사용됐지만 잘 안 쓰는 이유는 Fetch API가 더 간단하고 사용하기 쉽기 때문이다. fetch는 ES6부터 JavaScript에 도입된 내장 라이브러리인데 따로 설치하지 않고, 사용해도 되기 때문에 axios의 단점을 보완해줄 수 있다. 그럼에도 불구하고 axios를 많이 사용하는 이유는 자동으로 JSON 변환이 가능하기 때문에 fetch보다 사용이 더 간편하다. 이 외에도 장점은 많다. Promise 기반으로 동작하여 비동기 작업을 간편하게 처리하는 등 여러가지가 있다.

🟨 axios 외부 라이브러리

• 보통 버튼태그에 onClick 이벤트를 사용하여 데이터를 요청하는 경우가 많다. axios를 사용하려면 설치를 해야 하는데 아래 설치방법을 살펴보면 ...

<axios 설치>
(1) 터미널 > npm install axios
(2) axios import 해오기
(3) axios 작성방법 > axios.get('URL').then((매개변수) => 매개변수)

• .get으로 데이터를 요청해서 받아오고 .then으로 데이터를 매개변수 가지고 왔을 때 화면에 렌더링이 될 내용을 보여줄 수 있다. 보통은 result 또는 response,res로 많이 적는다. ⚠️result라고 적었을 때 출력해보면 내가 필요한 데이터만 가져온 것이 아닌 서버 성공여부에 대한 내용, 다른 필요하지 않은 내용들도 같이 가지고 오기 때문에 반환할 때는 result.data 라고 적어서 필요한 데이터만 받을 수 있게 불러오면 된다. 아래는 예시인데 참고하면 ...

import axios from "axios"; //axios import 하기

const onClick = () => {
    axios.get("URL").then((result) => result.data);
  };

(4) 경로 작성이나 다른 게 잘못된 부분이 있으면 ajax 요청에 실패 할 수도 있다. 그럴 때에는 .catch() 를 사용해서 잘못된 부분이 있을 때 보여질 코드를 만들면 된다.

import axios from "axios"; //axios import 하기

const onClick= () => {
  axios.get("URL")
   .then((result) => {
      return result.data;
    })
    .catch(() => {
      // 에러 발생 시 기본값이나 처리 방법 추가
    });
}}

💡axios를 이용한 예제

• 더보기 버튼 클릭 시 데이터 요청한 것을 받아와서 상품들 보여지게 하기

//App.jsx

import axios from "axios";
import data from "./data";

function App() {
  const [shoes, setShoes] = useState(data);
  
  const fileData = (number) => {
    axios
      .get(`https://codingapple1.github.io/shop/data${number}.json`)
      .then((result) => {
        const copy = [...shoes, ...result.data];
        setShoes(copy);
      });
  };

  const onClickAddItems = () => {
    if (shoes.length === 3) {
      fileData(2);
    } else if (shoes.length === 6) {
      fileData(3);
    } else if (shoes.length === 9) {
      alert("상품이 없습니다");
    }
  };
  return (
    <div className="App">
      <Button variant="secondary" onClick={onClickAddItems}>
         더보기
      </Button>
    </div>
  );
}
export default App;

• 배열의 길이를 확인하여 get요청으로 데이터를 받아왔다. axios를 계속 조건문에 쓰기에는 코드도 길어지고, 보기에도 불편하다. 템플릿 리터럴 방법을 사용해서 2➡️3으로만 변경되면 되기 때문에 변수 number를 넣어줬고, 인수로 그에 맞는 2, 3을 넣어줬다.

출처

코딩애플 리액트