[React]Ajax 요청하는 방법(axios)
Ajax 요청이란
Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 서버에 요청할 수 있게 도와준다. 리액트에서는 주로 axios라는 라이브러리를 사용하여 ajax 요청을 한다. axios 라이브러리를 사용하면 JSON 자료형을 object로 자동 변경해준다.
ajax 요청하는 방법
1.javascript :
fetch()2.jQuery :
$.ajax()3.axios :
axis.get()
axios로 ajax 요청하기
axios 준비하기
axios 설치하기
터미널에서 아래 명령어로 axios 라이브러리를 설치한다.
방법1. yarn add axios
방법2. npn install axios
axios 임포트하기
사용할 파일 상단에 라이브러리를 첨부한다.
import axios from ‘axios’;
axios 사용하기
ajax 요청
// GET 요청
axios.get('서버 url');
// POST 요청
axios.post('서버 url', {키 : 값, 키 : 값});ajax 요청 성공시
.then(()=>{
})ajax 요청 실패시
.catch(()=>{
}) 전체 코드
<button className='btn btn-primary' onClick={()=>{
// 서버에 Get 요청
axios.get('https://codingapple1.github.io/shop/data2.json')
// 요청 성공시 실행할 코드
.then((result)=>{
console.log('성공했어요.');
console.log(result); // ajax로 요청한 정보 출력
console.log(result.data); // ajax로 요청한 데이터 출력
})
// 요청 실패시 실행할 코드
.catch(()=>{
console.log('실패했어요.');
})
}}>더보기</button>결과 화면
axios 예제
쇼핑몰 더보기 버튼 만들기
1.더보기 버튼 생성
<button className='btn btn-primary more'>더보기</button>2.클릭 이벤트 넣기
<button className='btn btn-primary more' onClick={()=>{
}}>더보기</button>3.상품 데이터 요청
<button className='btn btn-primary more' onClick={()=>{
// 서버에 Get 요청
axios.get('https://codingapple1.github.io/shop/data2.json')
// 요청 성공시 실행할 코드
.then(()=>{
})
// 요청 실패시 실행할 코드
.catch(()=>{
})
}}>더보기</button>4.요청 성공시
<button className='btn btn-primary more' onClick={()=>{
// 버튼 클릭시 로딩중 UI를 띄운다.
document.querySelector(".more").textContent = '로딩중';
// 서버에 Get 요청
axios.get('https://codingapple1.github.io/shop/data2.json')
// 요청 성공시 실행할 코드
.then((result)=>{
// 요청 성공하면 로딩중 UI를 지운다.
document.querySelector(".more").textContent = '더보기';
shoes변경([...shoes, ...result.data]);
})
// 요청 실패시 실행할 코드
.catch(()=>{
})
}}>더보기</button>shoes변경([...shoes, ...result.data]); : … 은 대괄호를 벗겨준다는 명령으로 대괄호를 벗겨서 다시 대괄호로 감싸주는 코드이다. 이 방법을 사용하면 원본 데이터를 변경하지 않는다는 리액트의 데이터 원칙에 위배되지 않게 사본을 일일이 만들어서 사용하지 않게 만들어준다.
5.요청 실패시
<button className='btn btn-primary more' onClick={()=>{
// 버튼 클릭시 로딩중 UI를 띄운다.
document.querySelector(".more").textContent = '로딩중';
// 서버에 Get 요청
axios.get('https://codingapple1.github.io/shop/data2.json')
// 요청 성공시 실행할 코드
.then((result)=>{
// 요청 성공하면 로딩중 UI를 지운다.
document.querySelector(".more").textContent = '더보기';
shoes변경([...shoes, ...result.data]); // ... : 대괄호를 벗겨준다 , [] : 대괄호로 다시 감싸준다.
})
// 요청 실패시 실행할 코드
.catch(()=>{
// 요청 실패하면 로딩중 UI를 지운다.
console.log('실패했어요.');
})
}}>더보기</button>결과 화면
