react나 vue에서 백엔드로 특정 값을 넣어 데이터를 전달할땐, parameter와 query를 사용하는것 총 두 가지 방법이 있다.
실제로 여러 프로젝트를 진행할때마다 이를 혼용해서 사용해서, 이번 기회에 좀 확실하게 내가 사용하려고 정리해보고자 한다.
일반적으로 파라미터는 특정 id나 이름을 가지고 조회할 때 사용하고, 쿼리의 경우엔 검색, 요청을 할때 필요한 옵션을 전달한다고 한다.
예시
실제로 무신사 탭을 예시로 보자
검색 창에 조던을 검색해보니 아래와 같이 url이 변경됐다.
https://www.musinsa.com/search/musinsa/integration?type=&q=조던
여기서 아래 빨강 부분의 티셔츠를 클릭해서 이동해보자.
상품 상세 보기 페이지로 들어오게 되니 url이 아래와 같이 변경됐고, 상품의 정보를 보여준다. 이때 뒤에있는 숫자가 상품 번호로 추측할 수 있겠다.
https://www.musinsa.com/app/goods/1901749
간단하게 알아본 예시로 알 수 있는 것은 검색시 query를 사용하고, 특정 id값을 조회하는 용도로 parameter를 사용해 상품의 정보를 보여준다는 사실을 알게 됐다.
1. Query
쿼리는 주로 검색이나 요청 시 필요한 옵션을 전달하는 데 사용된다. 일반적으로 URL의 끝에 ?를 붙이고, key=value 형식으로 쿼리 파라미터를 추가한다. 여러 개의 쿼리 파라미터를 전달할 때는 &로 구분할 수 있다.
https://api.example.com/products?category=shoes&color=red
이 예시에서는 category와 color라는 두 개의 쿼리 파라미터를 전달한다. category=shoes는 신발 카테고리를 검색하고, color=red는 빨간색 신발을 검색하는 옵션을 나타낸다.
2. Parameter
파라미터는 주로 특정 ID나 이름과 같은 값을 사용하여 조회할 때 사용한다. 파라미터는 URL 경로에 직접 포함되며, 대체로 동적인 부분을 나타낸다.
https://api.example.com/products/123
활용하기
Vue
Query (쿼리) 가져오기
Vue에서는 Vue Router를 사용하여 query를 가져올 수 있다. $route.query를 통해 현재 라우트의 쿼리 파라미터를 객체로 가져올 수 있다.
// 예시: 현재 페이지의 'category' 쿼리 파라미터 값 가져오기
this.$route.query.category
Params (파라미터) 가져오기
Vue에서는 Vue Router를 사용하여 params를 가져올 수 있다. $route.params를 통해 현재 라우트의 파라미터를 객체로 가져올 수 있다.
// 예시: 현재 페이지의 'id' 파라미터 값 가져오기
this.$route.params.idReact
Query (쿼리) 가져오기
React에서는 React Router를 사용하여 query를 가져올 수 있다. useLocation() 훅을 사용하여 현재 URL의 쿼리 파라미터를 가져올 수 있다.
import { useLocation } from 'react-router-dom';
// 예시: 현재 페이지의 'category' 쿼리 파라미터 값 가져오기
const location = useLocation();
const category = new URLSearchParams(location.search).get('category');
Params (파라미터) 가져오기
React에서도 React Router를 사용하여 params를 가져올 수 있다. useParams() 훅을 사용하여 현재 URL의 파라미터를 가져올 수 있다.
import { useParams } from 'react-router-dom';
// 예시: 현재 페이지의 'id' 파라미터 값 가져오기
const { id } = useParams();
정리
- 쿼리는 URL에 추가되는 키-값 쌍으로 옵션을 전달하는 데 사용.
- 파라미터는 URL 경로에 직접 포함되어 특정 값으로 조회할 때 사용.
