vue3 검색기능

watchEffect

import { watchEffect } from 'vue'

export default {
	setup() {
		watchEffect(() => {})
	}
}

watchEffect(() => {}) 으로 사용한다

변경을 감지하면 해당 함수를 실행한다.

이때 동적(ref)으로 할당된 변수 값이 아니라면 변경이 있어도 함수를 실행하지 않는다.

watch

watchEffect와 동일하게 watch(() => {}) 형식으로 사용한다

watch(변경을 감지할 변수, (현재값, 이전값) => {}) 변수를 지정해준다 라는 차이점이 존재한다.

객체의 경우

import { watch, reactive } from 'vue'

export default {
	setup() {
		const a = reactive({
			b: 1
			c: 3
		})
		// 이런식으로 작성한다.
		watch(() => [a.b, a.c], (current, prev) => {})
	}
}

안에 배열로 작성하면 여러개의 변수의 변화를 관찰할 수 있다. (ref 변수도 동일)

watch를 이용해 검색기능 향상

todos의 전체리스트에서 필터링을 한후 넘겨주는 방식

const searchText = ref('')

watch(searchText, () => {
  getTodos(1)
})

const getTodos = async (page = currentPage.value) => {
      try {
        const res = await axios.get(`http://localhost:3000/todos?subject_like=${searchText.value}&_page=${page}&_limit=${limit}`)
        numberOfTodos.value = res.headers['x-total-count']
        todos.value = res.data
        currentPage.value = page
      } catch (err) {
        error.value = 'Something went wrong'
      } 
    }

getTodos 의 인자로 필터를 추가해서 searchText가 변화할 때 마다 새로운 리스트를 요청

문제 : Pagination 도입후 todos를 추가하면 한페이지에 보여주는 범위를 벗어나버림

const addTodo = async (todo) => {
      // 데이터베이스에 저장
      error.value = ""
      try{
        await axios.post('http://localhost:3000/todos', {
          subject: todo.subject,
          completed: todo.completed,
        })
        getTodos(1)
        // todos.value.push(res.data)
      } catch (err) {
        error.value = 'Something went wrong'
      }
    }

todos.value.push(res.data) ⇒ getTodos(1)

첫 페이지를 로딩하는 것으로 해결 (삭제도 동일)

새로 추가되는항목이 뒤에 있어 바로 추가가 되는지 확인이 안됨

⇒ API 요청을 id기준 역순으로 요청한다.

문제 : 이대로 요청하게 되면 변경사항이 발생할 때 마다 요청이 발생함

setTimeout : setTimeout(() => {실행할 함수}, 기다릴 시간)

하지만 setTimeout만 설정해도 3번의 요청을 보내는것은 같음 ⇒ clearTimeout 사용

watch(searchText, () => {
      clearTimeout(timeout)
      timeout = setTimeout(() => {
        getTodos(1)
      }, 2000)
    })

enter를 누를시 검색

const searchTodo = () => {
			// 기다리는 시간을 없애고 바로 검색
      clearTimeout(timeout)
      getTodos(1)
    }