AJAX: JS의 라이브러리 중 하나,
브라우저가 가지고 있는 XMLHttpRequest 객체를 이용하여 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 한 데이터 로드 -> 즉, JS를 통해서 서버에 데이터 요청
fetch와 axios의 차이점
- Fetch()는 body 프로퍼티를 사용하고,axios는 data 프로퍼티를 사용한다.
- Fetch의 url이 Fetch()함수의 인자로 들어가고, axios에서는 url이 option객체로 들어간다.
- Fetch에서 body부분은 stringify()로 되어진다.
Axios?
브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리.
*백엔드와 프론트엔드 통신을 쉽게하기 위해 AJAX도 더불어 사용하기도 함.
사용법
- 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 HTTP API 사용
- Promise(ES6) API 사용
- 요청과 응답 데이터의 변형
- HTTP 요청 취소 및 요청과 응답을 JSON 형태로 자동 변경
GET
axios.get(url,[,config])
✅ GET은 서버에서 어떤 데이터를 가져와서 보여준다거나 하는 용도이다.
주소에 있는 쿼리스트링을 활용해서 정보를 전달하는 것이지 GET메서드는 값이나 상태등을 바꿀 수 없다.
응답이 json 형태로 넘어온다.
POST
새로운 리소스 생성할 때 사용.
axios.post("url주소",{
data객체
},[,config])
Q) Post는 새로운 리소스를 생성할 때 사용되는데 그러면 언제 POST를 사용하나요?
✅ 로그인, 회원가입 등 사용자가 생성한 파일을 서버에다가 업로드할때 사용한다.
Post를 사용하면 주소창에 쿼리스트링이 남지 않기때문에 GET보다 안전하다.
Delete
REST 기반 API 프로그램에서 DB에 저장되어 있는 내용 삭제 목적으로 사용.
axios.delete(url,[,config]);
✅ Delete메서드는 HTML Form 태그에서 기본적으로 지원하는 HTTP 메서드가 아니다.
Delete메서드는 서버에 있는 데이터베이스의 내용을 삭제하는 것을 주 목적으로 하기에 두 번째 인자를 아예 전달하지 않는다.
Example
axios.delete("/thisisExample/list/30").then(function(response){
console.log(response);
}).catch(function(ex){
throw new Error(ex)
}
PUT
REST 기반 API 프로그램에서 DB에 저장되어 있는 내용 갱신 목적으로 사용
axios.put(url[, data[, config]])
✅ PUT메서드는 HTML Form 태그에서 기본적으로 지원하는 HTTP 메서드가 아니다.
PUT메서드는 서버에 있는 데이터베이스의 내용을 변경하는 것을 주 목적으로 하고 있다.
참고
https://velog.io/@shin6403/React-axios%EB%9E%80-feat.-Fetch-API
[React] axios란? (feat. Fetch API)
# Intro 리액트는 효율적인 UI 구현을 위한 라이브러리이다. HTTP Client(HTTP 상에서 커뮤니케이션을 하는 자바 기반 컴포넌트)를 내장하고 있는 Angular와는 다르게, 리액트는 따로 내장 클래스가 존재
velog.io
Axios란? / Axios 사용 및 서버 통신 해보기!
Axios란? Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다. # Axios란? # Axios사용법 # Axios를 사용해서 백엔드 없이 서버 통신 해보기!
velog.io
'FE > React & TS' 카테고리의 다른 글
[REACT Movie App part-two] React-router / react-router-dom (0) | 2023.05.11 |
---|---|
[REACT Movie App part-one] fetch / async / await / axios / Cannot read properties of undefined (reading 'map') 오류 (0) | 2023.05.11 |
[REACT] "Coin Tracker" fetch / useEffect / map / api data (0) | 2023.05.10 |
[REACT] Event (0) | 2023.05.09 |
[REACT] map / key (0) | 2023.05.09 |