Computed 캐싱

이전 글에 이어서 Vue.js의 computed의 캐싱에 대해 살펴봅시다.

Vue.js의 공식 문서 중 computed 속성-캐싱 챕터에 더욱 자세한 내용이 있으니 참고 바랍니다.

1. 표현식 추가

이중 중괄호{{ msg + '??' }} 문법 사이에 간단한 표현식을 추가하여 작성할 수 있습니다. 뿐만 아니라 {{ msg.split('').reverse().join('') }}와 같이 메소드를 추가하는 것도 가능합니다.

<template>
  <h1>{{ msg + '??' }}</h1>
  <h1>{{ msg.split('').reverse().join('') }}</h1>
</template>

2. 중복 연산

그렇다면 위에 추가한 표현식을 중복하는 경우는 어떨까요? 아래와 같이 여러 번 코드를 작성해야하는 비효율적인 코드 작성이 될 것입니다.

<template>
  <h1>{{ msg.split('').reverse().join('') }}</h1> // 연산 작업 실행
  <h1>{{ msg.split('').reverse().join('') }}</h1> // 연산 작업 실행
  <h1>{{ msg.split('').reverse().join('') }}</h1> // 연산 작업 실행
  <h1>{{ msg.split('').reverse().join('') }}</h1> // 연산 작업 실행
</template>

이를 script 태그에 메소드 데이터로 정의하여 실행하여 깔끔한 코드를 작성했습니다. 그러나 문제는 함수의 실행이 4번 반복되므로 내부의 로직이 총 4번이나 반복적으로 동작하게 됩니다. 아래의 코드와 위의 코드가 같은 개념인 것입니다.

<template>
  <h1>{{ reverseMessage() }}</h1> // 연산 작업 실행
  <h1>{{ reverseMessage() }}</h1> // 연산 작업 실행
  <h1>{{ reverseMessage() }}</h1> // 연산 작업 실행
  <h1>{{ reverseMessage() }}</h1> // 연산 작업 실행
</template>

3. Computed 캐싱

그렇다면, 어차피 연산은 같기 때문에 4번 중 한 번만 로직이 실행되고 똑같은 값을 반환하는 것이 가능할까요? 네, 그것이 바로 캐싱이라는 개념입니다.

3.1 캐싱

위의 두 번째 예시와 코드는 비슷해보이지만, 로직 자체는 매우 다릅니다.

computed를 통해 만든 계산된 데이터는 캐싱이라는 기능을 통해서 한 번 연산해놓은 값을 반복적으로 출력할 때 다시 한번 연산하지 않습니다. 왜냐하면 저장되어 있는 캐싱된 값으로 그대로 해당하는 내용을 화면에 출력하기 때문입니다.

이러한 캐싱의 기능으로 데이터를 최적화하는 용도로 자주 사용됩니다. 즉, computed에 작성하는 데이터는 연산이 복잡하더라도 반복 사용하는 데에 있어 부담이 적습니다.

<template>
  <h1>{{ reversedMessage }}</h1> // 첫 출력 시 연산 작업 실행
  <h1>{{ reversedMessage }}</h1> // 실행 X
  <h1>{{ reversedMessage }}</h1> // 실행 X
  <h1>{{ reversedMessage }}</h1> // 실행 X
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello Computed'
    }
  },
  computed: {
    reversedMessage() {
      return this.msg.split('').reverse().join('')
    }
  }
}
</script>