리액트 AJAX 요청하기

AJAX에 관한 정리 글

쇼핑몰 홈페이지를 예로 들어서 더보기 버튼을 눌렀을때, 상품에 대한 HTML들을 더 가져온다고 가정해보자.

<button onClick ={() => {}}> 버튼 </button>

버튼을 눌렀을때, 상품에 대한 데이터를 가져와야한다.

//상품 데이터

[
  {
    "id" : 3,
    "title" : "Flowey",
    "content" : "only 5 inches",
    "price" : 120000
  },
  {
    "id" : 4,
    "title" : "Baby shoes",
    "content" : "for less than 6",
    "price" : 120000
  },
  {
    "id" : 5,
    "title" : "Red Herring",
    "content" : "Born in France",
    "price" : 120000
  }
]

axios 라이브러리를 이용해보자

🔍 axios 설치

npm install axios

import axios from "axios"; // import 해오기

🔍 axios를 통한 get 요청 방식

   <button onClick ={() => {axios.get('데이터를 요청할 서버 URL')
      .then((data) => {console.log(data)})
      .catch(() => {
        console.log('error');
      })
      }}> 버튼 </button>

이런식으로 데이터를 요청할 서버에게 get 요청을 날리고,

올바르게 요청이 갔다면 data를 응답해준다. 그것이 아니라면 error 메세지를 띄우도록 하였다.

let [product, setProduct] = useState(data);

<button onClick ={() => {axios.get('https://codingapple1.github.io/shop/data2.json')
      .then((data) => {
        let copy = [...product, ...data.data];
        setProduct(copy);
      })
      .catch(() => {
        console.log('error');
      })
      }}> 버튼 </button>

위처럼 스프레드 문법을 사용해주어서 기존 상품에 대한 데이터들과, 새로 들어온 데이터들의 복사본을 만들어주고

state 변경 함수를 통해서 state를 변경해주는 식으로 구현하였다.

저 버튼을 눌렀을때 상품의 데이터들이 더 가져온것을 확인할 수 있다.

이건 단순히 기존에 있던 데이터를 쓴거여서 나중에 노드를 통해 더 구체적으로 구현해보아야겠다.