[ReactLog] Axios 요청에서 `params` vs `data` 완벽 정리

🔍

Axios로 API 요청할 때 가장 흔한 실수 중 하나는 바로 params와 data의 오용입니다.
특히 POST 요청 시 params: {}로 감싸서 서버에서 값을 못 받는 일이 자주 발생하죠.

---

✅ 핵심 개념 요약

요청 방식	목적	Axios 두 번째 인자에 넣는 값	서버로 전달 위치
GET	URL 쿼리 파라미터	{ params: { ... } }	/url?key=value
POST	요청 본문 (Body)	{ key: value }	JSON Body

---

❌ 흔한 실수: POST인데 params로 감쌈

// ❌ 잘못된 예시 - 서버는 name 못 받음
axios.post("/users/123/playlists", {
  params: { name: "My Playlist" }
});

이렇게 하면 실제 서버에는 body가 다음처럼 전달됨:

{
  "params": {
    "name": "My Playlist"
  }
}

서버는 name을 찾지 못하고 "Missing required field: name" 에러 발생!

---

✅ 올바른 작성법

✅ GET 요청

axios.get("/me/playlists", {
  params: {
    limit: 10,
    offset: 0,
  }
});
// → 실제 요청: /me/playlists?limit=10&offset=0

✅ POST 요청

axios.post("/users/123/playlists", {
  name: "My Playlist",
  description: "노래 모음집",
  public: false,
});
// → 서버는 JSON body로 위 내용을 받음

---

💡 실무 기준 추천 패턴

// ✅ GET 요청
export const getPlaylists = (query: { limit: number; offset: number }) => {
  return axios.get("/me/playlists", { params: query });
};

// ✅ POST 요청
export const createPlaylist = (userId: string, data: { name: string }) => {
  return axios.post(`/users/${userId}/playlists`, data);
};

---

🧠 기억 포인트

• GET 요청 → params 키로 감싸서 쿼리스트링
• POST 요청 → data로 직접 넘겨야 body에 들어감
• params: { ... } ← GET에서는 OK, POST에서는 NO!
• 값은 맞는데 서버에서 못 받는다면 → 구조(중괄호) 실수일 확률 90%

---

🏷️ 관련 키워드

axios get post params data 차이 axios 요청 실패 axios 중괄호 실수 벨로그 마크다운