[vue.js] computed 속성과 filter(), 화살표 함수

자 이번 포스팅에서는 저번에 못다루엇던 computed 속성과 filter를 한번 더 다뤄보겠습니다. 

언제나 화살표 함수는 익숙해지지가 않네요.

복습을 먼저 해보겠습니다. 

 

화살표함수는 function을 생략하는 방식이였죠. 

• function Sum (a,b) ={ return a+b; }
• var Sum = function (a,b){ return a+b }
• var Sum =  (a, b) => { return (a+b) }

 

최종적으로는 맨 아래 형태로 생략해서 쓸 수 있죠. 

이제는 점점 익숙해 질꺼같네요.  차근차근 눈에 익히면 다른 코드에서 보더라도 당황안하고 해석 할수 있게 되겠죠?

 

자 이제 새로 도입되는 개념입니다. 

computed 속성입니다. 

 

이전 포스팅에서는 소개를 안드렸지만 ref속성들을 통해서 값을 동기화 시킬수 있고, 

v-bind와 v-on 그리고 이를 합친 v-model을 통해 한방향 또는 양방향으로 데이터를 동기화 시킬수 있습니다. 

 

ref의 예시로는

const test = ref(false)이렇게 작성하고, 

test의 값은 웹 사이트가 불러졌을때 동적으로 계속해서 추적해서 바꿔나갈 수 있습니다. 

 

그리고 v-bind를 통해 태그 또는 속성들과 위에서 예시든 변수들을 동기화 시킬수 있습니다. 

v-on 을 통해 마찬가지로 태그나 속성들과 결합해 원하는 메소드, 함수를 발동 시킬 수 있습니다. 

 

model은 이 둘을 합친 것으로 양방향으로 동기화 시킬수 있습니다. 

 

이를 이용해서 대표적인 예제 (저번 포스팅에 이은) todo 목록 중 필터링 부분의 코드를 보고 분석해보겠습니다. 

 

const todos = ref([
  { id: id++, text: 'HTML 배우기', done: true },
  { id: id++, text: 'JavaScript 배우기', done: true },
  { id: id++, text: 'Vue 배우기', done: false }
])

todos는 이렇게 되어있습니다. .value를 통해서 값에 접근 가능하겠죠?

 

const hideCompleted = ref(false)

그리고  완료된 항목은 필터링 하기 위해서 변수 하나를 잡아줍니다. 

디폴트값은 필터링이 안되어야되므로 false값을 줍시다.  ref는 참조라고 했죠? 이 값은 계속 어떠한 이벤트나 트리거에 의해 변화하게 됩니다. 

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo">
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in filteredTodos" :key="todo.id">
      <input type="checkbox" v-model="todo.done">
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
  <button @click="hideCompleted = !hideCompleted">
    {{ hideCompleted ? 'Show all' : 'Hide completed' }}
  </button>
</template>

그리고 템플릿 부분입니다. 

이전 포스팅에서 조금 다뤘죠? 

여기서 안 다뤘던 부분은 button태그가 되겠네요

button 태그에 v-on click을 통해 클릭했을때의 이벤트를 넣었네요. 

여기서는 hideCompleted 를 토글하는 이벤트이네요.

별로 어렵지 않죠? 

 

그리고 v-for 쪽을 보면 todo in filteredTodos 라고 되어있죠?ㅡ 

filteredTodos 리스트를 반복해서 사용하겠다는 의미입니다. 

filteredTodos를 그러면 살펴보겠습니다.

 

const filteredTodos = computed(() => {
  return hideCompleted.value
    ? todos.value.filter((t) => !t.done)
    : todos.value
})

자 여기서 우리가 살펴봐야 할 computed 속성이 나옵니다. 

말 그대로 computed, 계산된 이라는 의미이죠?

변수를 미리 계산된 값으로 변환시켜주죠, 그리고 당연히 변수값이 변동되면 이를 추적합니다.

 

여기서는 return 을 통해서 todos.value값을 주네요.

좀더 자세히 보면

hideCompleted의 값이 참이냐 거짓이냐에 따라서 삼항 연산자를 써서

참이면 todos.value를 filter함수를 통해 필터링 한값을

거짓이면 그냥 todos.value를 리턴하게 됩니다.

filter는 저번 포스팅에서 다루었었죠?

t.todo 가 false인것을 필터링 할것이다. 라고 해석 할 수 있겠네요. 

그럼 false인 값들은 사라지고 우리가 생각한대로 결과값이 나오겠네요.

 

추가로 filter함수의 매개변수 t의 경우 다른 변수명으로 사용해도 무관하답니다. 

 

지금까지 todo 리스트를 알아보았습니다. 

:0 익숙해지도록 계속 코드를 보고 해석도 해보고 해서 자기것으로 만드시길 바랍니다. 

 

다음 포스팅에서 뵙겠습니다.