210713 리액트에서의 ajax

ajax: 새로고침없이 서버에 요청할 수 있도록 도와줌
비동기처리

요청은 크게 두 가지 방법으로 할 수 있다.
1. GET 요청: url을 입력한다 특정페이지/자료 읽기에 이용
2. POST 요청: url 변경 없이 정보를 숨겨서 서버에 전달

ajax에는 세 가지 방법이 있음.
1. jQuery 문법인 $.ajax()
2. axois를 이용한 axios.get()
3. 자바스크립트 fetch()

ajax 사용해서 더보기 버튼 만들기

npm install axios
yarn add axios

axios 라이브러리를 설치하고, App.js에다 axios 라이브러리를 import 해준다.

import axios from 'axios';

이제 서버에 ajax 요청을 하고 상품 데이터 3개를 더 가져와보자

axios.get(/*데이터를 요청할 URL*/);

새로고침 없이 데이터를 가져옴
.then() 서버와 통신이 성공했을 때
.catch() 서버와 통신이 실패했을 때

<button className="btn btn-primary" onClick={()=>{
  axios.get('https://codingapple1.github.io/shop/data2.json')  //서버에게 GET요청
  .then(()=>{
  //성공하면 success를 출력
    console.log('success');
  })
  .catch(()=>{
  //실패하면 fail을 출력
    console.log('fail');
  }); 

짠! 이렇게 콘솔 창에 success가 떴다.

✔ 자료를 출력하려면?
then() 안에 파라미터를 만들어 결과를 넘겨준다.
axios는 json을 가져와서 object로 알아서 바꿔줌

<button className="btn btn-primary" onClick={()=>{
  axios.get('https://codingapple1.github.io/shop/data2.json')  //서버에게 GET요청
  .then((result)=>{
    console.log(result.data);
  })
  .catch(()=>{
  //실패하면 fail을 출력
    console.log('fail');
  }); 

✔ 더보기 버튼을 눌렀을 때 HTML에 띄우기

<button className="btn btn-primary" onClick={()=>{
  axios.get('https://codingapple1.github.io/shop/data2.json')  //서버에게 GET요청
  .then((result)=>{
    setShoes([...shoes, ...result.data]);
  })

더보기 버튼을 눌렀을 때 이렇게 뜬다!

Q. 더보기 버튼을 두 번 누르면?
누른 횟수를 count 변수 등으로 저장해서 url에 state 변수 처리해주면 됨.
2번째 눌렀을 때는 data3.json으로 연결되도록, 3번째 눌렀을 때는 data4.json으로 연결되도록 하기

Q. 더보기로 보여줄 상품이 이제 없다면?
보여줄 상품의 마지막에 도달했을 때 버튼을 숨기기

데이터를 보내고 싶다면 POST 요청을 이용한다

axios.post('서버URL', { 전달할 데이터 });

detail 컴포넌트 로드시 ajax로 데이터 가져오기

detail.js의 useEffect()를 사용한다.
useEffect()안에 axios.get()사용

useEffect(()=>{
  axios.get().then().catch()
  }, []);  //대괄호 꼭 추가하기