계산된 속성(Computed Property) - Vue.js

템플릿 내에서 코드가 반복되고 있는 등 반응형 데이터를 포함하는 복잡한 논리의 경우 사용

• data 나 다른 속성이 변경될 때 함수가 실행되어 저장된 캐싱된 값 ↔ data 옵션
• 함수의 실행은 의존하고 있는 속성(프록시) 또는 data가 변경될 때 한 번 호출됨
• 함수명이 계산된 속성명이 됨

<div id="app">
  1보다 큰 수: <input type="text" v-model.number="num" />
  <br />
  1부터 입력한 값까지의 합: <span>{{sum}}</span><br /> <!-- 함수가 속성명, 캐싱됨 -->
    1부터 입력한 값까지의 합: <span>{{sum}}</span><br /> <!-- 다시 계산되지 않고 캐싱된 값 렌더링 -->
    1부터 입력한 값까지의 합: <span>{{sum}}</span><br /> <!-- 캐싱된 값 렌더링 -->
</div>
<script src="https://unpkg.com/vue"></script>
<script>
  let vm = Vue.createApp({
  name: "App",
  data() {
      return { num: 0 };
  },
  computed: { // 객체로 정의 
      sum() { // 함수, 함수의 리턴값이 속성명에 렌더링됨
              // 함수 내의 프록시 객체인 의존하고 있는 속성이 변하면 sum()이 다시 호출되고 다시 캐싱됨 
              console.log("## num: " + **this.num**); // this.num == data() 내의 num 
              let n = parseInt(**this.num**);
              if (Number.isNaN(n)) return 0;
              return (n * (n + 1)) / 2;
          },
      },
  }).mount("#app");
</script>

 

계산된 캐싱 vs 메서드

• 메서드를 호출해서 동일한 결과를 얻을 수 있어 결과적으로 두 가지 접근 방식은 동일
• 계산된 속성 : 의존된 반응형을 기반으로 캐싱됨
  • 변경되지 않은 여러 곳에서 접근할 경우 getter 함수를 다시 실행하지 않고 이전에 계산된 결과를 즉시 반환
• 메서드 호출 : 리렌더링이 발생할 때마다 항상 함수를 실행

➡️ 캐싱을 원하지 않는 경우에만 메서드 호출을 사용

---

 

수정 가능한 계산된 속성

• 기본적으로 getter 전용이므로 계산된 속성에 새 값 할당 시 런타임 에러
• setter 가 필요한 경우 getter, setter 을 모두 제공해 속성을 만들 수 있음

// this.fullName = 'John Doe'를 실행하면 setter가 호출되고, 
// 그에 따라 this.firstName과 this.lastName이 업데이트
data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName: {
      // getter
      get() {
        return this.firstName + ' ' + this.lastName
      },
      // setter
      set(newValue) {
        // 참고: 분해 할당 문법을 사용함.
        [this.firstName, this.lastName] = newValue.split(' ')
      }
    }
  }

---

 

이전 값을 가져오기 3.4+

• computed 속성이 반환했던 이전 값을 가져올 수 있음
• getter의 첫 번째 인자로 접근 가능

data() {
  return {
    count: 2
  }
},
computed: {
  alwaysSmall(previous) {
      // count 값이 3 이하일 때 해당 값을 반환
    if (this.count <= 3) {
      return this.count
    }
        // count가 4 이상이 되면, 조건을 마지막으로 만족했던 값이 반환 
    // count가 다시 3 이하로 감소할 때까지 유지
    return previous
  }
}

data() {
  return {
    count: 2
  }
},
computed: {
  alwaysSmall: {
    get(previous) {
      if (this.count <= 3) {
        return this.count
      }

      return previous;
    },
    set(newValue) {  // writable로 구현한다면...
      this.count = newValue * 2
    }
  }
}

---

 

권장 사항

getter에서 사이드 이펙트 ❌

getter함수는 순수한 계산만을 수행하고 부작용이 없어야 함

• 계산된 getter 안에서 다른 상태 변형 ❌
• 비동기 요청 ❌
• DOM 변경 ❌

계산된 값 변경 ❌

계산된 반환값은 읽기 전용으로 처리되어야 하고 변경되면 안 됨