[Vue] Computed 속성과 Computed 캐싱

⚠️ 이 포스팅은 Vue3(한국어): Computed 속성과 Watch를 공부하고 정리한 블로그 포스팅입니다. ⚠️

1. Computed 속성

 

---

 

Computed 속성

템플릿 안에서 너무 많은 연산을 하면 코드가 비대해지고 유지보수가 어렵다. 아래의 예제에서는 문자열 msg 데이터를 거꾸로 출력해주는 reverseMsg라는 메서드가 있다. 이 메서드의 결과값을 화면에 세번 출력시키기 위해 같은 메서드를 세번 부른다면 메서드가 호출될때마다 같은 연산을 반복하면서 메모리가 낭비된다.

<template>
  <section>
    <!-- reverseMsg 메서드 호출 -->
    <p>{{ reverseMsg() }}</p>
    <p>{{ reverseMsg() }}</p>
    <p>{{ reverseMsg() }}</p>
  </section>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello World',
    };
  },
  methods: {
    reverseMsg() {
      return this.msg.split('').reverse().join('');
    },
  },
};
</script>

 

연산된값을 반복해서 출력하고 싶다면 computed 옵션을 사용해 함수를 만들어준 후 호출해준다. computed 옵션 안에 있는 함수는 단 한번만 연산이 되고 화면에는 연산된 값을 출력만하므로 메모리 낭비를 줄일 수 있다.

<template>
  <section>
    <!-- methods -->
    <p>{{ reverseMsg() }}</p>
    <p>{{ reverseMsg() }}</p>
    <p>{{ reverseMsg() }}</p>
    <!-- computed -->
    <p>{{ reversedMsg }}</p>
    <p>{{ reversedMsg }}</p>
    <p>{{ reversedMsg }}</p>
  </section>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello World',
    };
  },
  methods: {
    reverseMsg() {
      return this.msg.split('').reverse().join('');
    },
  },
  computed: {
    reversedMsg() {
      return this.msg.split('').reverse().join('');
    },
  },
};
</script>

 

methods vs computed

methods

• methods는 호출되면 실행되는 함수기 때문에 함수 이름이 동사로 시작한다
• reverseMsg() 함수를 호출한다 (호출되면 함수안에 값이 연산되기 시작한다)

computed

• computed는 이미 연산된 값을 불러오기 때문에 함수이름이 명사다
• reversedMsg로 연산된 값을 불러온다 (값을 불러오기 전에 값은 연산되어 있다)

 

Computed 캐싱

• 메서드 호출은 다시 렌더링이 발생할 때마다 항상 함수를 실행하는 반면 computed에 정의한 함수는 이미 연산된 값이기 때문에 메모리 낭비를 줄일 수 있다
• 한번 연산된 값은 캐싱(메모리에 저장)되기 때문에 연산을 반복해서 하지 않아도 된다
• 같은 연산이 반복될때 computed 옵션 안에 함수를 정의해 최적화로 사용한다