req.params vs req.query (axios, express)

사이드 프로젝트중에 axios로 delete메서드를 호출해야 상황이 있었다. 특정 post를 삭제하려는 목적이었다. axios에서 특정 post의 id를 넘겨주는데도 불구하고 서버에서는 이 id값을 인식하지 못하는 문제점이 있었다. 원인은 바로 내가 req.params와 req.query를 정확히 구분 하지 못하고 있었다는 것이다. 나의 지식 부족을 다시 한번 느끼며 이를 정리해 보았다.

req.params vs req.query

서버에서 req.params로 받을 수 있는 것은, 이미 예약된(?) 값이라고 생각 할 수 있다. 예를 들어 서버의 routing코드가 아래와 같다고 하자.

post.get("/:id/:name", function1);

그리고 데이터를 요청하는 클라이언트 측의 axios가 아래와 같다고 하자.

await axios({
  method: "get",
  url: `www.example.com/post/1/jun`,
  params: { title: 'hello!' },
})

이 경우 전송되는 url은 ‘www.example.com/post/1/jun?title=hello!’ 이다.

이럴 경우 서버에서 req.params와 req.query를 출력하면 결과값은 어떻게 나올까? 위에서 조금 애매하게 말하긴 했지만, req.params는 예약된 값이라고 했다. routing을 보면 id와 name이 예약되어 있음을 알고있다. 즉 서버에서 id라는 변수로 어떤 값이 들어올 것을 알고, name이라는 변수에 어떤 값이 들어올 것임을 알고 대기하고 있다. req.params는 url을 분석하여 id와 name자리에 있는 값을 낚아챈다. 따라서 req.params를 출력해보면 아래와 같다.

console.log(req.params); // { id: '1', name: 'jun' }

한편 req.query를 출력하면 아래와 같다.

console.log(req.query); // { title : 'hello!' }

즉, url에서 ?뒤에 입력되는 query문을 req.query로 받아오는 것이다.

req.body는?

req.body는 XML, JSON, Multi Form 등의 데이터를 담는다. 주소에선 확인할 수 없고 post method를 사용할 때 쓴다. delete나 get을 사용할 때, axios에 data : { ~ ~ } 이렇게 data를 사용하면 서버에서 받아올 수 가 없다.

결론

axios에서 추가 데이터를 보내는 방법에는 data와 params가 있다. data는 post요청을 보낼 때 사용되는 객체이며, params는 위의 예시처럼 url에 포함되는 데이터를 넣어주는 것이다. 주의해야 할 점은, 서버에서는 req.params를 사용하면 예상된 변수(?)값을 받아오는 의미이지만, axios에서는 params가 ?뒤에오는 쿼리문을 뜻한다. 헷갈리지 말자!

추가적으로 XML, JSON, Multi Form등을 사용해야 할 때는 post 요청을 보낼 때다. delete, get을 사용할 때는, data로 넘기지말고 params로 간단히 id를 넘겨야 한다.