메인 프로젝트에서 템플릿을 사용할때, 왜 사용하는지 정리하는 중에 알게 된 사실이다.
왜 fetch 보다 axios를 쓰는 것이 좋을까?
axios와 fetch는 모두 HTTP 요청을 보내는 데 사용되는 도구입니다.
하지만 axios는 fetch보다 편리한 API와 기능을 제공하며, 프로미스 기반으로 비동기 작업을 처리하는 데 있어서 더 직관적이고 편리한 방법을 제공합니다.
아래 예시 코드를 통해 axios가 fetch보다 어떻게 편리한지 알아보겠습니다.
1. GET 요청
axios로 GET 요청을 보내는 예시 코드는 다음과 같습니다:
axios.get('/api/users')
.then(response => {
// 응답 데이터 처리
console.log(response.data);
})
.catch(error => {
// 에러 처리
console.error(error);
});
fetch로 GET 요청을 보내는 예시 코드는 다음과 같습니다:
fetch('/api/users')
.then(response => response.json())
.then(data => {
// 응답 데이터 처리
console.log(data);
})
.catch(error => {
// 에러 처리
console.error(error);
});
axios는 .get() 메서드를 사용하여 간단하게 GET 요청을 보낼 수 있습니다.
응답 데이터는 response.data로 접근할 수 있습니다. 또한, 에러 핸들링은 .catch() 메서드를 통해 처리할 수 있습니다.
fetch의 경우 .json() 메서드를 사용하여 응답 데이터를 JSON 형식으로 파싱해야 하며, 응답 데이터는 체이닝된 다음 .then() 블록에서 접근할 수 있습니다. 에러 핸들링은 마찬가지로 .catch() 메서드를 통해 처리됩니다.
2. POST 요청
axios로 POST 요청을 보내는 예시 코드는 다음과 같습니다:
javascript
Copy code
axios.post('/api/users', { name: 'John', age: 25 })
.then(response => {
// 응답 데이터 처리
console.log(response.data);
})
.catch(error => {
// 에러 처리
console.error(error);
});
fetch로 POST 요청을 보내는 예시 코드는 다음과 같습니다:
javascript
Copy code
fetch('/api/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ name: 'John', age: 25 })
})
.then(response => response.json())
.then(data => {
// 응답 데이터 처리
console.log(data);
})
.catch(error => {
// 에러 처리
console.error(error);
});
axios에서는 .post() 메서드를 사용하여 POST 요청을 보낼 수 있으며, 데이터는 두 번째 인자로 전달됩니다.
응답 데이터는 response.data로 접근할 수 있습니다.
fetch에서는 요청 설정 객체에 method, headers, body 등을 명시하여 POST 요청을 구성해야 합니다.
응답 데이터는 response.json()을 사용하여 JSON 형식으로 파싱해야 합니다.
요약
fetch를 사용하는 경우에는 요청 설정 객체에 더 많은 구성을 해주어야 하고, 응답 데이터에 접근하기 위해 .json() 메서드를 호출하여 데이터를 파싱해야 합니다.
이로 인해 axios는 코드를 간결하고 직관적으로 유지하는 데 도움이 됩니다.
'React' 카테고리의 다른 글
useEffect의 의존성 배열 오류 해결 => useCallBack (0) | 2023.07.22 |
---|---|
서버에서 데이터는 들어왔는데, 렌더링이 안되는경우 (0) | 2023.07.16 |
setState 함수 호출 이후에 상태값을 바로 사용못함 (0) | 2023.06.21 |
(해결과정기록) 기대와 달리 다른 컴포넌트에서 작동이 되는 경우 (1) | 2023.06.11 |
useReducer와 Redux의 차이점 (0) | 2023.06.09 |
메인 프로젝트에서 템플릿을 사용할때, 왜 사용하는지 정리하는 중에 알게 된 사실이다.
왜 fetch 보다 axios를 쓰는 것이 좋을까?
axios와 fetch는 모두 HTTP 요청을 보내는 데 사용되는 도구입니다.
하지만 axios는 fetch보다 편리한 API와 기능을 제공하며, 프로미스 기반으로 비동기 작업을 처리하는 데 있어서 더 직관적이고 편리한 방법을 제공합니다.
아래 예시 코드를 통해 axios가 fetch보다 어떻게 편리한지 알아보겠습니다.
1. GET 요청
axios로 GET 요청을 보내는 예시 코드는 다음과 같습니다:
axios.get('/api/users')
.then(response => {
// 응답 데이터 처리
console.log(response.data);
})
.catch(error => {
// 에러 처리
console.error(error);
});
fetch로 GET 요청을 보내는 예시 코드는 다음과 같습니다:
fetch('/api/users')
.then(response => response.json())
.then(data => {
// 응답 데이터 처리
console.log(data);
})
.catch(error => {
// 에러 처리
console.error(error);
});
axios는 .get() 메서드를 사용하여 간단하게 GET 요청을 보낼 수 있습니다.
응답 데이터는 response.data로 접근할 수 있습니다. 또한, 에러 핸들링은 .catch() 메서드를 통해 처리할 수 있습니다.
fetch의 경우 .json() 메서드를 사용하여 응답 데이터를 JSON 형식으로 파싱해야 하며, 응답 데이터는 체이닝된 다음 .then() 블록에서 접근할 수 있습니다. 에러 핸들링은 마찬가지로 .catch() 메서드를 통해 처리됩니다.
2. POST 요청
axios로 POST 요청을 보내는 예시 코드는 다음과 같습니다:
javascript
Copy code
axios.post('/api/users', { name: 'John', age: 25 })
.then(response => {
// 응답 데이터 처리
console.log(response.data);
})
.catch(error => {
// 에러 처리
console.error(error);
});
fetch로 POST 요청을 보내는 예시 코드는 다음과 같습니다:
javascript
Copy code
fetch('/api/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ name: 'John', age: 25 })
})
.then(response => response.json())
.then(data => {
// 응답 데이터 처리
console.log(data);
})
.catch(error => {
// 에러 처리
console.error(error);
});
axios에서는 .post() 메서드를 사용하여 POST 요청을 보낼 수 있으며, 데이터는 두 번째 인자로 전달됩니다.
응답 데이터는 response.data로 접근할 수 있습니다.
fetch에서는 요청 설정 객체에 method, headers, body 등을 명시하여 POST 요청을 구성해야 합니다.
응답 데이터는 response.json()을 사용하여 JSON 형식으로 파싱해야 합니다.
요약
fetch를 사용하는 경우에는 요청 설정 객체에 더 많은 구성을 해주어야 하고, 응답 데이터에 접근하기 위해 .json() 메서드를 호출하여 데이터를 파싱해야 합니다.
이로 인해 axios는 코드를 간결하고 직관적으로 유지하는 데 도움이 됩니다.
'React' 카테고리의 다른 글
useEffect의 의존성 배열 오류 해결 => useCallBack (0) | 2023.07.22 |
---|---|
서버에서 데이터는 들어왔는데, 렌더링이 안되는경우 (0) | 2023.07.16 |
setState 함수 호출 이후에 상태값을 바로 사용못함 (0) | 2023.06.21 |
(해결과정기록) 기대와 달리 다른 컴포넌트에서 작동이 되는 경우 (1) | 2023.06.11 |
useReducer와 Redux의 차이점 (0) | 2023.06.09 |