Axios와 Fetch의 PUT 요청 차이점과 사용법

Axios와 Fetch의 PUT 요청 차이점과 사용법

웹 개발에서 데이터를 업데이트할 때 PUT 요청을 많이 사용합니다. Java Spring의 @PutMapping을 사용할 때, 프론트엔드에서 fetch와 axios를 사용하여 요청을 보낼 수 있습니다. 하지만 두 방법에는 중요한 차이점이 존재합니다.

이번 포스팅에서는 Axios와 Fetch의 PUT 요청 차이점과 올바른 사용법을 정리하겠습니다.

---

1. Fetch를 사용한 PUT 요청

JavaScript의 fetch API를 이용해 PUT 요청을 보내려면, 요청 본문(body)을 **JSON 문자열(string)**로 변환해야 합니다.

✅ Fetch를 이용한 PUT 요청 (JSON.stringify() 필요)

fetch("/v1/member/1", {
    method: "PUT",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({ name: "changed" }) // ✅ 직접 JSON 변환 필요
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error("Error:", error));

📌 Fetch의 중요한 특징

• body에는 문자열만 허용되므로 JSON.stringify()로 변환해야 함.
• headers에 Content-Type: application/json을 직접 명시해야 함.

---

2. Axios를 사용한 PUT 요청

Axios는 fetch와 달리, 객체를 자동으로 JSON으로 변환하여 보내기 때문에 JSON.stringify()를 사용할 필요가 없습니다.

✅ Axios를 이용한 PUT 요청 (자동 JSON 변환)

axios.put("/v1/member/1", { name: "changed" }) // ✅ 자동 JSON 변환
    .then(response => console.log(response))
    .catch(error => console.error("Error:", error));

📌 Axios의 중요한 특징

• body에 객체를 전달하면 Axios가 자동으로 JSON 변환해줌.
• Content-Type: application/json이 자동으로 설정됨, 따로 명시할 필요 없음.

📌 headers를 명시적으로 설정하는 경우

대부분 자동 설정되지만, 필요하면 아래처럼 명시할 수 있습니다.

axios.put("/v1/member/1", { name: "changed" }, {
    headers: {
        "Content-Type": "application/json"
    }
});

---

3. Java Spring의 @PutMapping과 연결하기

프론트엔드에서 PUT 요청을 보낼 때, 백엔드에서는 @PutMapping을 사용하여 데이터를 받을 수 있습니다.

✅ Spring Controller (@PutMapping)

@PutMapping("/v1/member/{id}")
public ResponseEntity<String> updateMember(@PathVariable Long id, @RequestBody MemberDto memberDto) {
    memberService.updateMember(id, memberDto);
    return ResponseEntity.ok("Member updated successfully");
}

📌 백엔드에서 @RequestBody를 사용해야 하는 이유

• PUT 요청 본문(body)에 포함된 JSON 데이터를 MemberDto 객체로 변환하기 위해 **@RequestBody**를 사용해야 합니다.
• @RequestBody가 없으면, 요청 데이터가 null이 되거나 400 Bad Request 오류가 발생할 수 있습니다.

---

4. Axios vs Fetch 정리

비교 항목FetchAxios

JSON 변환 필요 여부	JSON.stringify(data) 필요	자동으로 변환됨
Content-Type 자동 설정	직접 설정 필요	자동 설정됨
에러 처리 방식	response.ok 체크 필요	자동으로 catch에서 처리
사용법	표준 API (네이티브)	기능이 더 풍부한 라이브러리

---

5. 어떤 걸 사용해야 할까?

✅ 간단한 API 호출만 필요하다면? fetch 사용 가능
✅ 에러 처리 및 JSON 변환을 자동으로 하고 싶다면? axios 추천

🔥 결론

1. fetch는 JSON.stringify()가 필요하지만, axios는 자동 변환해줌.
2. fetch는 headers를 직접 설정해야 하지만, axios는 자동 설정됨.
3. Java Spring에서 PUT 요청을 받을 때는 @RequestBody를 꼭 사용해야 함.

이제 PUT 요청을 Axios와 Fetch로 올바르게 사용할 수 있습니다!