Web> Path Parameter & Query Parameter

Path Parameter와 Query Parameter을 사용해보고 학습하게된 계기는 이번 팀프로젝트를 진행하면서였다. 내가 맡아 진행했던 부분은 전체 상품페이지 였는데, 전체 상품페이지에 가장 핵심적인 기능으로는 필터링 기능과 원하는 상품을 클릭했을 때 해당 상품의 상세페이지로 이어지는 동적 라우팅 기능이었다.
필터링 기능은 서버에 원하는 정보를 알려주기위해 쿼리 파라미터를 사용했고, 상세페이지로 이동하는 부분은 상품의 ID값을 사용하여 서버에 원하는 상품의 정보를 요청하기위해 동적 라우팅을 사용했다.

Path Parameter

localhost:8000/products/1
localhost:8000/products/25
localhost:8000/products/89

위와 같이 해당 페이지의 뒤에 상품들의 ID값이 들어가는 형식으로 사용할 수 있는데, URL경로에서 달라지는 부분인 숫자부분을 저장하는 매개변수를 Path Parameter라고 한다.

라우터 컴포넌트에서

<BrowserRouter>
  <Routes>
    <Route path='/products/:id' element={<Detail />} />
  </Routes>
</BrowserRouter>

위와같이 :id 를 작성해 Path Parameter의 사용을 명시한 후 사용할 수 있다. 위와같이 사용하고 Detail 페이지의 부모컴포넌트인 Products 페이지에서 클릭된 상품의 ID 값을 프롭스로 내려주고 해당 상품의 Detail 페이지로 이동되었을 때 ID값을 받아 '사이트 Url/products/상품ID값' 의 형태로 백엔드에 요청을 전달하면 동적 라우팅이 가능해진다.

Query Parameter

Query Parameter 는 필터링 기능을 구현할 때 사용했는데, 해당 페이지에서 백엔드 서버에 특정한 조건을 만족하는 데이터들만 요청할 때 사용할 수 있다.

localhost:8000/products?sort_by=newest&category=leaf_tea

우리팀의 프로젝트에서는 다음과같은 형태로 사용했었는데, '?' 라는 기호는 URL에서 쿼리스트링을 알리는 기호로써 다른 사용처는 존재하지않기 때문에 ?가 보이면 쿼리스트링을 사용한 부분이다.
위의 URL은 데이터를 최신순으로 정렬하고, 잎차들의 정보만을 가져오는 필터링이 적용된 쿼리스트링이다. 쿼리스트링의 조건 키값은 백엔드와 서로 소통하여 결정해야하고 프론트단에서는 협의하여 맞춘 키값을 통해 원하는 정보를 요청하기만 하면 된다.

결론

패스 파라미터와 쿼리 파라미터는 사용처가 다른데 패스 파라미터는 특정 데이터만 보여주고 싶을때, 쿼리 파라미터는 필터링이나 정렬과 같이 어떤 데이터들에 변화를 주어 가져올 때 사용할 수 있을 것 같다. 🤔