[ Vue.js 3 공식 문서 ] 2. Essentials - Computed Properties ( computed )

 

[ Reference ] 

https://vuejs.org/guide/essentials/computed.html

Computed Properties | Vue.js

 

 

1. Basic Example

  Template 표현 방식은 매우 편리하지만 그만큼 간단한 작동을 위한 것이라는 의미도 내포한다. 너무 많은 로직을 Template 안에 넣게 되면 무거워지면서 유지하기가 어려워진다. 반응형 데이터를 포함하는 복잡한 논리의 경우 계산된 속성을 사용하는 것이 권장된다. 

 

<script setup>
import { reactive, computed } from 'vue'

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

// a computed ref
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})
</script>

<template>
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</template>

 

  여기에서 계산된 속성을 ** publishedBooksMessage ** 로 선언했다. ** computed( ) ** 함수는 getter 함수를 지나 리턴이 되고 그 리턴된 값은 Ref 값 (이후 Computed Properties) 이다. 이 계산된 Computed Properties 는 일반적인 Ref 와 동일하게 작동하며 계산된 결과에 접근할 수 있도록 도와준다. 그 Computed Ref 는 publishedBokkMessage.value  로 접근을 할 수 있고 일반 Ref 와 마찬가지로 wrapping 해제디어 .value 없이도 참조할 수 있다. Computed Properties 는 Responsive Dependencies (반응적 종속성)을 추적한다. (* 여기서 Responsive Dependencies, 반응적 종속성이란 Computed Properties 를 반환하기 위해 계산돼야 하는 값들을 의미한다. 다시 말하자면, Computed Properties 는 그 계산돼야 하는 값들에 따라 값이 변화되므로 종속적인 관계를 맺으며 반응한다는 것이다.) 위의 예시 코드에서 ** publishedBooksMessage ** 는 ** author.books ** 의 값에 따라서 변한다. 그러면 Computed Properties인 ** publishedBooksMessage ** 는 이 ** author.books ** 의 값을 자동으로 추적해서 변화한다는 것이다. 

 

---

2. Computed Caching VS Methods

  Computed 로 계산한다는 것에서 "계산" 이라는 것 자체가 이미 Methods 로 실행할 수 있다는 것을 의미한다. 위의 코드는 아래와 같은 메소드를 이용해서 똑같이 구현할 수 있다. 

 

// template
<p>{{ calculateBooksMessage() }}</p>

 

// script
function calculateBooksMessage() {
  return author.books.length > 0 ? 'Yes' : 'No'
}

 

  그렇다면 Computed 를 이용해서 계산하는 것이 왜 필요한가? Computed Propeties 는 Reactive Dependencies 에 기해서 캐싱됐다는 점이다. Computed Properites (계산된 속성) 는 일부 Reactive Dependencies (반응성 종속성) 이 변경된 경우에만 반응해서 값을 업데이트 한다. 캐싱이 된다는 것은 그만큼 동일한 계산을 하지 않게 함으로써 더 효율적으로 딱 필요한 만큼만 실행할 수 있다. 만야겡 캐싱이 되지 않으면 getter 함수가 계속 작용해서 값을 불러오고 있을 것이다. 만약, 이 캐싱을 원하지 않는 경우에는 Method 를 사용하고, 이후에도 어떤 값에 따라서 똑같은 로직(계산)으로 결과 값을 내고 싶다면 Computed 를 사용하는 것이 좋다.

 

---

3. Writable Computed

  Computed Properties 는 오직 getter 만 가능하다. (* 오해하지 말아야 할 점은, 실제로 getter 함수를 실행한다는 것이 아니라 Read-Only 와 같은 맥락이라는 점이다) 만약, Computed Properties 에 새로운 값을 할당하려고 하면 경고 문구가 뜰 것이다. getter 의 기능 뿐만 아니라 setter 의 기능도 주고 싶다고 하다면 computed 안에서 get( ) 과 set( ) 을 분리해서 사용할 수 있다.

 

<script setup>
import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
  // getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    // Note: we are using destructuring assignment syntax here.
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})
</script>