axios(get, post, put, delete)

Notice

Recent Posts

Recent Comments

Link

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

Lsiron

axios(get, post, put, delete) 본문

프론트엔드/React

axios(get, post, put, delete)

Lsiron 2024. 6. 2. 05:23

axios란?

리액트 axios는 브라우저와 Node.js를 위한 Promise 기반의 HTTP 클라이언트 라이브러리로, 비동기 방식으로 서버와 데이터를 주고받을 수 있도록 도와주는 도구이다. axios를 사용하면 간단하게 HTTP 요청을 보내고 응답을 받아올 수 있으며, RESTful API와의 통신에 매우 유용하다. axios는 다른 HTTP 클라이언트 라이브러리보다 더 간단하고 직관적인 API를 제공하여 개발자들이 쉽게 사용할 수 있도록 도와준다.

fetch와 axios의 차이점?

axios와 fetch는 모두 HTTP 요청을 보내는데 사용되는 도구이지만, 사용 방법과 기능에 차이가 있다.

fetch

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

=> fetch는 브라우저에 내장된 기본적인 API이며, axios처럼 기본적으로 JSON 데이터를 자동으로 파싱해주는 기능이 없다. 따라서 .json() 메서드를 사용하여 응답 데이터를 JSON 형식으로 파싱해야 한다. 또한 fetch는 네트워크 요청이 성공했던 실패했던 상관없이 Response 객체를 반환하므로, 응답 상태를 체크하여 처리해주어야 한다.

axios

import axios from 'axios';

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

=> 반면에, axios는 간단하게 요청을 보내고 응답을 받을 수 있다. 또한 Promise를 반환하므로 .then 및 .catch 메서드를 사용하여 응답을 처리할 수 있다. 또한 axios는 기본적으로 JSON 데이터를 자동으로 파싱해주는 기능이 내장되어 있다.

(굳---이 fetch처럼 response => response.json() 이 짓거리를 안 해도 된다.)

fetch와 axios의 비동기처리?

fetch

const fetchData = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchData();

=> 역시나 똑같이 응답데이터를 JSON 형식으로 파싱해준 모습이 보인다.

axios

import axios from 'axios';

const fetchData = async () => {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

fetchData();

=> JSON 데이터를 자동으로 파싱해주는 기능이 내장되어 있기때문에 굳이 응답데이터를 처리하는 모습이 보이지 않는다.

axios 매서드?

axios의 각 메서드는 Promise를 반환하므로 .then 및 .catch 메서드를 사용하여 요청에 대한 응답을 처리할 수 있다. 또한, 각 메서드의 설정(config) 객체를 사용하여 요청에 대한 다양한 설정을 지정할 수 있다.axios를 사용하면 간편하게 HTTP 요청을 보내고 서버와의 통신을 처리할 수 있다.

즉, axios는 다양한 메서드를 제공하여 HTTP 요청을 보다 쉽게 처리할 수 있다. 아래에 axios의 주요 메서드들과 각각의 사용 예제를 살펴보자.

1. axios.get(url [, config])

GET 요청을 보내는 메서드로, 지정된 URL에 GET 요청을 보낸다. 선택적으로 설정(config) 객체를 전달하여 요청에 대한 구성을 지정할 수 있다. GET 요청은 주로 데이터를 요청할 때 사용된다.

const axios = require('axios');

axios.get('https://api.example.com/data')
  .then(response => {
    // 요청이 성공했을 때 실행되는 코드
    console.log(response.data);
  })
  .catch(error => {
    // 요청이 실패했을 때 실행되는 코드
    console.error(error);
  });

=> 위 코드는 axios.get 메서드를 사용하여 ‘https://api.example.com/data’ 엔드포인트에서 데이터를 가져오는 예시이다. 먼저 axios 라이브러리를 가져와서 axios.get 메서드를 호출하고, then 메서드를 이용하여 성공했을 때의 처리를, catch 메서드를 이용하여 실패했을 때의 처리를 정의한다. 이를 통해 비동기적인 API 요청을 처리하고, 성공 또는 실패에 따른 적절한 처리를 할 수 있다.

(참고 : 엔드포인트란 API에서 데이터를 주고받을 수 있는 특정한 URL을 말한다.

예를 들어, ‘https://api.example.com/data'는 데이터를 요청하거나 응답받을 수 있는 엔드포인트 URL이다. 이 엔드포인트를 통해 API와 통신하여 필요한 데이터를 주고받을 수 있다.)

2. axios.post( url, data[, config])

POST 요청을 보내는 메서드로, 지정된 URL에 POST 요청을 보낸다. 데이터(data) 객체를 함께 전달하여 서버로 전송할 데이터를 지정할 수 있다. POST 요청은 주로 새로운 데이터를 생성하거나 업데이트할 때 사용된다.

axios.post('https://api.example.com/data', {
  firstName: 'John',
  lastName: 'Doe'
})
.then(function (response) {
  console.log('요청 성공: ', response.data);
})
.catch(function (error) {
  console.error('요청 실패: ', error);
});

=> 위 코드에서는 axios.post 메서드를 사용하여 ‘https://api.example.com/data’ URL로 POST 요청을 보내고 있다. 요청 본문에는 firstName과 lastName을 포함한 데이터가 포함되어 있다. 요청이 성공하면 응답 데이터를 콘솔에 출력하고, 요청이 실패하면 에러 메시지를 콘솔에 출력하는 코드이다.

저기에서 data로 넣어주는 값의 역할이 뭘까? { firstName: 'John', lastName: 'Doe'}

=> 서버에서는 POST 요청으로 받은 데이터를 데이터베이스에 저장하는 작업을 수행할 수 있다. 만약 위의 데이터를 POST 요청으로 받았다면, 서버는 ‘John Doe’라는 이름을 데이터베이스에 저장할 수 있다. 이후에는 저장된 데이터를 조회하거나 다른 작업을 수행할 수 있다.

또 다른 예시로는, 서버에서는 받은 데이터를 기반으로 사용자에게 응답을 보내는 작업을 수행할 수 있다. 예를 들어, 서버는 받은 데이터를 기반으로 ‘Hello, John Doe!’와 같은 메시지를 클라이언트에게 응답으로 보낼 수 있다.

3. axios.put( url, data[, config])

PUT 요청을 보내는 메서드로, 지정된 URL에 PUT 요청을 보낸다. 데이터(data) 객체를 함께 전달하여 서버의 데이터를 업데이트한다. PUT 요청은 주로 데이터를 업데이트할 때 사용된다.

const axios = require('axios');

// PUT 요청을 보낼 데이터
const updatedUserData = {
  firstName: 'Jane',
  lastName: 'Smith'
};

// PUT 요청을 보낼 URL
const url = 'https://api.example.com/users/123';

axios.put(url, updatedUserData)
  .then(response => {
    console.log('데이터가 성공적으로 업데이트 되었습니다.');
    console.log('응답 데이터:', response.data);
  })
  .catch(error => {
    console.error('데이터를 업데이트하는데 실패했습니다.');
    console.error('에러 메시지:', error.message);
  });

=> updatedUserData 객체에 담긴 데이터를 서버로 전송하여 사용자 정보를 업데이트하는 작업을 수행한다. 서버는 전달된 데이터를 기반으로 해당 사용자의 정보를 업데이트하고, 그 결과를 응답으로 클라이언트에게 전송한다.

4. axios.delete(url [, config])

DELETE 요청을 보내는 메서드로, 지정된 URL에 DELETE 요청을 보낸다. DELETE 요청은 지정된 자원이나 데이터를 삭제할 때 사용된다.

const axios = require('axios');

const userId = 123; // 삭제할 사용자의 ID

axios.delete(`https://api.example.com/users/${userId}`)
  .then(response => {
    console.log('사용자 정보가 성공적으로 삭제되었습니다.');
    console.log('응답 데이터:', response.data);
  })
  .catch(error => {
    console.error('사용자 정보를 삭제하는데 실패했습니다.');
    console.error('에러 메시지:', error.message);
  });

=> DELETE 요청은 서버에서 특정 리소스를 삭제하기 위해 사용된다. 위의 코드에서는 https://api.example.com/users/ 경로에 DELETE 요청을 보내어 userId에 해당하는 사용자 정보를 삭제한다.

axios.delete 메서드를 사용할 때는 URL과 함께 파라미터를 전달해야 한다. axios.delete(‘https://api.example.com/users/’, { data: { userId: userId }})와 같이 쓰는 것이 가능하지만, 보통은 위 처럼 URL에 동적으로 userId와 같은 파라미터를 넣어주는 경우가 많다.

아래는 리액트로 TodoList를 만들때 axios와 fetch 사용예시이다. 참고하도록 하자.

//App.js (프론트)

import { useState, useEffect } from 'react';

import axios from 'axios';

const SERVER_URL = 'http://localhost:4000/api/todo';

function App() {

const [todoList, setTodoList] = useState(null);

const fetchData = async () => {

const response = await axios.get(SERVER_URL);

setTodoList(response.data);

};

// fetch('http://localhost:4000/api/todo')

// .then((response) => response.json())

// .then((data) => setTodoList(data));

//처음 한번 실행됐을때만 fetch로 가져오도록 하는 것.

useEffect(() => {fetchData();}, []);

const onSubmitHandler = async (e) => {

e.preventDefault();

const text = e.target.text.value;

const done = e.target.done.checked;

await axios.post(SERVER_URL, {text, done});

fetchData();

// fetch('http://localhost:4000/api/todo', {

// method: 'POST',

// headers: {

// 'Content-Type' : 'application/json',

// },

// body: JSON.stringify({

// text,

// done,

// }),

// }).then(() => {fetchData();});

};

return (

</form>

{todoList?.map((todo) => (

</div>

))}

</div>

);

}

export default App;

//app.js (백)

const express = require('express');

const app = express();

const cors = require('cors')

app.use(cors())

app.use(express.json()); // for parsing application/json

app.use(express.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded

let id = 2;

const todoList = [

{

id: 1,

text: '할일 1',

done: false,

];

app.get('/api/todo', (req, res) => {

res.json(todoList);

});

app.post('/api/todo', (req, res) => {

const {text, done} = req.body;

todoList.push({

id: id++,

text,

done,

});

return res.send('success');

});

app.listen(4000, () => {

console.log("server start!");

});

=> id와 text, 그리고 checkbox를 체크 했는지 안 했는지의 done이 추가하면 제대로 등록되는것을 볼 수있다.

파일은 https://github.com/lsiron/Send-server 를 참고하면 되겠다.

'프론트엔드 > React' 카테고리의 다른 글

상태관리(Context API) (2)	2024.06.01
Custom hook, styling, SPA와 라우팅 (0)	2024.05.30
event처리, hooks (0)	2024.05.24
JSX, Components, Props/State (0)	2024.05.22
리액트 시작하기. (0)	2024.05.19

'프론트엔드/React' Related Articles

Lsiron

axios(get, post, put, delete) 본문

axios(get, post, put, delete)

axios란?

fetch와 axios의 차이점?

fetch와 axios의 비동기처리?

axios 매서드?

'프론트엔드 > React' 카테고리의 다른 글

티스토리툴바