[Vue.js] Router params, query, state

회사에서 프로젝트를 진행하며 state로 1이란 데이터를 넘겼는데 정작 꺼내보니 0으로 나오고 어떻게 해결해야 할지 몰라 query를 사용하여 데이터를 넘겨받아 해결한 적이 있어서, 어디가 문제였는지 공부할 겸 정리를 해보려고 한다!!!

1. Params, Query, State의 차이

1 - 1. Params

URL 경로의 일부로 라우팅 경로에서 동적으로 변화하는 값을 전달하며,

일반적으로 특정 리소스를 식별할 떄 사용하여, 동적 URL 경로에서 특정 값을 추출할 때 사용합니다.

ex) user/:id, product/:id

// URL 경로: /user/:id
const route = useRoute();
const userId = route.params.id; // 'id'는 URL 파라미터

1 - 2. Query

URL 경로에서 ? 뒤에 붙는 Key-Value 형태로 전달되는 데이터로 여러 개의 데이터를 전달하려면 &를 추가하여 하나의 문자열로 전달합니다.

주로, 요청에 대한 간단한 데이터를 전달하거나, 결과를 조회하거나 필터링 할 때 사용합니다.

ex) search?key1=value1&key2=value2

// URL: /search?searchType=apple&page=2
const route = useRoute();
const type = route.query.searchType;  // 쿼리 파라미터에서 'searchType' 값을 추출
const page = route.query.page;  // 쿼리 파라미터에서 'page' 값을 추출

1 - 3. State

애플리케이션 내에서 동적으로 관리되는 데이터로 컴포넌트나 전역에서 관리되며 URL에 직접 포함되지 않습니다.
주로 사용자 인터페이스나 기능에 따라 데이터를 추적하고 관리할 때 사용됩니다.

router.push({
	path: '/router-url',
	state: {
		name: data.value.companyName,
	},
});

---

2. Vue-use

vue-use는 Vue.js에서 유용한 도구와 패턴을 제공하는 라이브러리나 커뮤니티 모듈 모음을 지칭하는 경우가 많습니다. 예를 들어, @vueuse/core는 Vue 컴포지션 API와 잘 통합된 유틸리티 함수들을 제공하는 유명한 라이브러리입니다.
이를 통해 Vue 프로젝트에서 복잡한 기능을 간단하게 구현할 수 있습니다. 예를 들어, 반응형 상태 관리, 브라우저 기능 제어, 클라이언트-서버 동기화 등의 작업을 쉽게 처리할 수 있습니다.

2 - 1. 주요 특징

• 반응형 상태 관리: Vue의 ref와 reactive를 기반으로 확장된 기능을 제공.
• 브라우저 API 래퍼: 로컬 스토리지, 미디어 쿼리, 다크 모드, 네트워크 상태 등과 같은 브라우저 API를 쉽게 사용할 수 있음.
• 서드파티 API와 통합: Firebase, Axios, Geolocation 등과 같은 서드파티 라이브러리를 쉽게 사용할 수 있음.

2 - 2. Params, Query, State를 Vue-use와 함께 사용한 예제

2 - 2 - 1. Params

Params는 URL 경로의 일부로 사용됩니다. useRoute와 함께 동적으로 변하는 데이터를 처리할 때 유용합니다.

<script lang="ts">
import { defineComponent } from 'vue';
import { useRoute } from 'vue-router';

export default defineComponent({
  name: 'ParamsExample',
  setup() {
    const route = useRoute();

    // Route Params에서 'id' 추출
    const userId = route.params.id;

    return {
      userId,
    };
  },
});
</script>

<template>
  <div>
    <p>User ID: {{ userId }}</p>
  </div>
</template>

2 - 2 - 2. Query

Query는 URL의 ? 뒤에 붙는 키-값 쌍으로 데이터를 전달합니다. useRoute와 함께 데이터에 접근할 수 있습니다.

<script lang="ts">
import { defineComponent } from 'vue';
import { useRoute } from 'vue-router';

export default defineComponent({
  name: 'QueryExample',
  setup() {
    const route = useRoute();

    // Query Parameters에서 데이터 추출
    const searchType = route.query.searchType;
    const page = route.query.page;

    return {
      searchType,
      page,
    };
  },
});
</script>

<template>
  <div>
    <p>Search Type: {{ searchType }}</p>
    <p>Page: {{ page }}</p>
  </div>
</template>

2 - 2 - 3. State

State는 URL에 노출되지 않고 브라우저 히스토리 객체를 통해 데이터를 전달합니다. 이 방식은 민감한 데이터를 전달하거나 URL을 깨끗하게 유지할 때 유용합니다.

<script lang="ts">
import { defineComponent } from 'vue';
import { useRouter, useRoute } from 'vue-router';

export default defineComponent({
  name: 'StateExample',
  setup() {
    const router = useRouter();
    const route = useRoute();

    const navigateWithState = () => {
      router.push({
        path: '/state-example',
        state: { name: 'Vue.js' },
      });
    };

    // State에서 데이터 추출
    const name = route.state?.name;

    return {
      navigateWithState,
      name,
    };
  },
});
</script>

<template>
  <div>
    <button @click="navigateWithState">Navigate with State</button>
    <p>State Name: {{ name }}</p>
  </div>
</template>

---

3. 요약

3 - 1. 비교

URL 표시 여부	예 (URL 일부)	예 (URL 끝)	아니요
데이터 용도	필수 데이터 전달	선택적 데이터 전달	민감한 데이터 전달
새로고침 유지	유지	유지	유지되지 않음
예시	/user/123	/search?keyword=vue	내부적으로만 사용

3 - 2. 언제 무엇을 사용할까?

• param: 경로 기반으로 고정된 데이터 전달 시.
• query: 필터, 검색 등 추가적인 데이터 전달 시.
• state: 보안상 URL에 나타나지 않아야 하는 데이터 전달 시.