[Vue3] watch 함수를 이용해서 url 쿼리스트링 값 실시간으로 가져오기

Composition API를 사용한 반응형 상태 변경

#index.ts

const router = createRouter({ 
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/:tag', //쿼리스트링 변수 설정하기
      name: 'tag',
      component: HomeView,
    },
  ],
});

- tag로 쿼리스트링 변수 설정하기 

 

#자식 컴포넌트.vue
  /**
   * 태그 클릭시 url에 파라미터 추가 함수
   * ex) www.domain.com/?tag=테스트
   * item : 클릭한 태그
   */
  const addParams = (item: string) => {
    router.push({ query: { tag: item } }); //쿼리 가져오기
    emit('addTagParams', item);
  };

- 클릭함수 매개변수로 텍스트를 가져와 url에 푸시해준다. 

#부모 컴포넌트.vue

const route = useRoute();
  const queryValue = ref<string | undefined>(route.query.tag as string);
  watch( // 데이터||변수 변경 감지 메소드
    () => route.query.tag, //감지 대상
    () => {
      queryValue.value = `${route.query.tag}`; //문자열로 변경 
      addTagParams(queryValue.value); //필터링 함수로 전달
    },
  );

- 태그가 바뀌거나 뒤로가기를 할때마다 변화를 감지해 새롭게 함수를 실행시켜준다. 

 

watch는 ref에 직접 작동한다. 
watch함수의 첫 인수로 전달되는 값이 변경 될때마다 두번째로 전달하는 콜백함수를 트리거한다. 

 

공식문서 : https://ko.vuejs.org/guide/essentials/watchers