[Udemy Vue 완벽가이드 Section13] 181. 쿼리 매개변수 사용하기

객체 형태로 위치를 나타내거나 링크의 목적지를 작성하는 방법은 이름을 사용하거나 긴 문자열이 아닌, 보다 쉬운 방법으로 링크를 설정한다는 점 외에도 또 다른 유용한 점이 있다.

→ 필요한 정보를 추가할 수 있다.

 

쿼리 매개변수를 사용한다고 가정해보자.

 

# 쿼리 매개변수란?

쿼리 매개변수는 route나 일부 URL의 물음표 뒤에 나타나는 것으로 예를 들어 /t1?sort=asc에서 'sort=asc'와 같은 것.

 

쿼리 매개변수는 기본적으로 라우트 매개변수에 작성하는 선택사항으로, 컴포넌트를 찾거나 로드할 때 필요한 것은 아니지만 컴포넌트에 정보를 전달할 때 사용할 수 있다.

 

필수적인건 아니지만 앱이나 페이지에서 유용하게 사용할 수 있다.

링크를 직접 생성할 때 이러한 쿼리 매개변수를 추가할 수 있다.

 

# 쿼리 매개변수 추가방법

1/ 문자열로 직접 추가

생성한 문자열에 쿼리 매개변수를 직접 추가하기만 하면 된다.

computed: {
  teamMembersLink() {
    return '/teams/' + this.id + '?sort=asc';
  },
},

 

 

2/ 객체에 query 프로퍼티로 추가

하지만 객체 폼을 사용한다면 훨씬 더 간편해진다.

- 구성 객체의 name과 params 프로퍼티 옆에 query 프로퍼티를 추가하면 된다.

- params 프로퍼티와 마찬가지로 query 프로퍼티도 중첩 객체를 취한다. 여기에는 어떤 쿼리 매개변수든 추가할 수 있다.

여기에 { sort: 'asc' }를 작성해 로드할 페이지인 to에 전달할 수 있다. asc라는 문자열을 전달한다.

<template>
  <router-link :to="teamMembersLink">View Members</router-link>
</template>


<script>
computed: {
  teamMembersLink() {
    return { name: 'team-members', params: { teamId: this.id }, query: { sort: 'asc' } };
  },
},
</script>

 

이렇게 원하는 쿼리 매개변수를 추가할 수 있고 당연히 페이지와 컴포넌트는 이를 지원한다.

 

 

 

이 쿼리 매개변수는 라우트 구성에 정의하지 않는다.

기본적으로 선택 사항이기 때문에 라우트 구성에 추가할 필요가 없다.

 

 

이대로 저장한 후 페이지를 새로고침하면 'View Members' 버튼을 클릭했을 때, URL에 자동으로 쿼리 매개변수가 추가된다.

현 상황에서 쿼리 매개변수가 필요한 건 아니지만, 추가할 수 있다.

 

 

만약 해당 쿼리 매개변수를 통해 로드하는 컴포넌트에 사용한다면, 이 경우 TeamMembers 컴포넌트에 사용된다.

해당 코드를 추출한 후 쿼리 매개변수에 접근할 수 있다.

 

TeamMembers.vue 컴포넌트에서 this.$route.query값을 콘솔에 출력해보자.

// TeamMembers.vue
created() {
  console.log(this.$route.query, this.sort);
},

query 프로퍼티에는 쿼리 매개변수에 대한 정보가 담겨있다.

저장 후, 페이지를 새로고침하고 콘솔을 열어보면 key인 sort와 value인 'asc'를 갖는 객체를 확인할 수 있다.

 

이 방법으로 라우팅을 통해 컴포넌트에 전달한 쿼리 매개변수에 액세스할 수 있다.

 

 

# 쿼리 매개변수 특징

참고로 쿼리 매개변수를 props로 제공할 순 없다.

쿼리 매개변수인 sort를 사용하니까 sort props를 기대하며 this.sort의 로그를 출력하려 해도 콘솔에는 undefined으로 뜬다.

 

쿼리 매개변수는 $route로만 액세스할 수 있기 때문에 undefined이 뜬다.

 

쿼리 매개변수는 선택사항이므로 큰 문제는 아니다.

 

 

 

만약 컴포넌트를 routing하지않고 다른 컴포넌트 템플릿에 임베딩하는 방식으로 사용하면, 쿼리 매개변수에 액세스할 수 없을 뿐 아니라 쿼리 매개변수는 선택 사항이므로 URL에 추가되지 않을 수도 있다.

 

Vue 라우터로 쿼리 매개변수 추가와 추출이 쉬워진다는건 중요하다.

지금 만들고 있는 더미 애플리케이션에는 필요없지만 다른 애플리케이션에는 필요할 수도 있다.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.