[Vue3] URL 쿼리스트링으로 검색 필터링하기

가계부 리스트를 필터링할 때, computed를 이용해서 변화값을 가져오고 필터링은 할 수 있지만

새로고침하면 데이터가 다 날아가게 된다.

 

새로고침해도 데이터가 날아가지 않도록 검색 분류값들을 url 쿼리스트링에 저장하고, 쿼리스트링 값을 가져와서 리스트를 필터링해보려고 한다.

 

---

Composition API 환경에서 router를 사용하려면 useRouter와 useRoute를 사용한다.

 

url로 쿼리값 보내기 - router.push({query: value})

<template>
	<input type='text' @keydown.enter="handleOnChangeSearch" v-model="searchValue" placeholder='검색어를 입력하세요'  />
	<MyButton :className="'btn_back'" :text="'검색'"  @click="handleOnChangeSearch" />
</template>

<script setup lang="ts">
(...)
import { useRoute, useRouter } from 'vue-router';

const searchValue = ref<string>(""); 

const router = useRouter();
const route = useRoute();
(...)

function handleOnChangeSearch(){
    router.push({query:{search: searchValue.value});
}

// 리스트 데이터
const formattedData = computed(():Data[]=>{
  let results = datas.value;
  if (searchValue.value) {
    results = results.filter((it) => it.content.includes(searchValue.value));
  }

  return results;
})

 

searchValue값이 바뀌면 computed에서 감지하고 formattedData를 반환한다.

이렇게 진행했을 때 검색은 잘 되지만 빈값을 입력하면 검색이 되지 않는다.

 

빈값을 검색하면 전체 리스트가 나오도록 하고, 검색 버튼 클릭 -> 쿼리스트링 추가 -> 그 값으로 검색  프로세스로 진행해보자.

url에서 쿼리값 가져오기 - route.query.value

(...)
<script setup lang="ts">
(...)
import { useRoute, useRouter } from 'vue-router';

const searchValue = ref<string>(""); 
const searchTagValue = ref<string>("");

const router = useRouter();
const route = useRoute();

function handleOnChangeSearch(){ // 검색 클릭 or 엔터
  if(!searchValue.value.trim()){
    const newQuery = {...route.query};
    delete newQuery["search"];
    router.push({query: newQuery})
    searchValue.value = "";
    searchTagValue.value = ""; // 빈값을 할당하여 formattedData computed가 작동하도록 함
  } else {
    const newQuery = {...route.query, search: searchValue.value}
    router.push({query:newQuery});
  }
}
(...)

watch(
  ()=> route.query.search,
  (newData)=>{
    if(newData){
      searchTagValue.value = newData.toString();
    }
  }
)

// 리스트 데이터
const formattedData = computed(():Data[]=>{
  let results = datas.value;
  if (searchTagValue.value) {
    results = results.filter((it) => it.content.includes(searchTagValue.value));
  } 

  return results;
})

URL에 있는 쿼리스트링을 가져오기 위해 route.query를 사용했다.

...route.query를 하지 않으면 기존에 있던 쿼리들이 없어지고 search 쿼리스트링 하나로 덮어씌워진다.

쿼리스트링을 기준으로 필터링을 하기 위해 쿼리값은 searchTagValue 변수를 추가하여 담아주고 해당 데이터를 기준으로 업데이트한다. 

 

watch 메소드를 사용해서 쿼리값이 변할때마다 searchTagValue에 담아준다.

 

결과

(...)
// 전체, 입금, 출금 필터링
function itemPlus(){
  const newQuery = {...route.query, multiply: plusFilter.value}
  router.push({query:newQuery});
}

// 검색어 필터링
function handleOnChangeSearch(){
  if(!searchValue.value.trim()){
    const newQuery = {...route.query};
    delete newQuery["search"];
    router.push({query: newQuery})
    searchValue.value = "";
    searchTagValue.value = ""; // 빈값을 할당하여 formattedData computed가 작동하도록 함
  } else {
    const newQuery = {...route.query, search: searchValue.value}
    router.push({query:newQuery});
  }
}

// 년도 필터링
function handleOnChangeYear(){
  const newQuery = {...route.query, year: yearValue.value};
  router.push({query:newQuery});
}
watch(
  ()=> route.query.search,
  (newData)=>{
    if(newData){
      searchTagValue.value = newData.toString();
    }
  }
)

// 새로고침하면 URL 쿼리값으로 필터링
onMounted(()=>{
  yearValue.value = route.query.year ? `${route.query.year}` : "전체";
  searchValue.value = route.query.search ? `${route.query.search}` : "";
  searchTagValue.value = route.query.search ? `${route.query.search}` : "";
  plusFilter.value = route.query.multiply ? `${route.query.multiply}` : "all";
})

// 리스트 데이터
const formattedData = computed(():Data[]=>{
  let results = datas.value;
  if (searchTagValue.value) {
    results = results.filter((it) => it.content.includes(searchTagValue.value));
  }
  if(yearValue.value !== "전체"){
    results = results.filter((it)=> it.year === yearValue.value);
  }
  if(plusFilter.value !== "all"){
    results = results.filter((it)=> it.multiply === plusFilter.value);
  }

  return results;
})
</script>

 

onMounted를 사용하여 새로고침해도 url의 쿼리스트링을 통해 검색이 가능하도록 한다.