[콜럼Vue스] 계산된 속성 (Computed Property)

**계산된 속성(Computed Property)**은 Vue.js에서 제공하는 매우 강력한 기능으로, 데이터의 변화에 따라 자동으로 값을 계산하여 반환하는 속성임. Vue의 반응형 시스템 덕분에 계산된 속성은 의존하는 데이터가 변경될 때만 다시 계산되며, 캐싱되어 성능을 최적화할 수 있음. 이를 통해 반복적인 계산을 줄이고, 더 효율적으로 데이터 변화를 처리할 수 있음.

이미지 출처 : 원쌤의 Vue.js 퀵스타트

 

1. 계산된 속성의 기본 개념

계산된 속성은 Vue 인스턴스나 컴포넌트 내에서 특정 데이터를 기반으로 자동으로 계산된 값을 제공하는 속성임. 템플릿에서 {{ }} 안에 계산된 속성을 사용할 수 있으며, Vue의 반응형 시스템에 의해 의존하는 데이터가 변할 때만 해당 속성이 다시 계산됨.

<div id="app">
  <p>{{ reversedMessage }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    },
    computed: {
      reversedMessage() {
        return this.message.split('').reverse().join('');
      }
    }
  });
</script>

 

• computed 옵션 내에 정의된 **reversedMessage**는 message 데이터를 기반으로 문자열을 뒤집은 값을 반환함.
• **this.message**를 참조하여 계산된 값이 템플릿에서 사용됨.
• 캐싱: message가 변경되지 않는 한, reversedMessage는 다시 계산되지 않음.

2. 계산된 속성과 메서드의 차이점

계산된 속성과 메서드 모두 템플릿에서 데이터를 처리하는 데 사용될 수 있지만, 주요 차이점은 계산된 속성은 캐싱되지만, 메서드는 호출될 때마다 다시 계산된다는 점임.

계산된 속성 예시

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('');
  }
}

 

메서드 예시 

methods: {
  reversedMessage() {
    return this.message.split('').reverse().join('');
  }
}

 

 

템플릿 사용

<p>{{ reversedMessage }}</p>

 

• 계산된 속성은 message가 변경되지 않는 한 한 번만 계산되며, 그 결과가 캐싱됨.
• 메서드는 템플릿이 다시 렌더링될 때마다 계산을 반복함. 따라서 복잡한 연산이 필요할 때는 계산된 속성을 사용하는 것이 성능에 유리함.

3. 계산된 속성의 캐싱

계산된 속성의 가장 큰 장점은 캐싱임. 즉, 의존하는 데이터가 변경되지 않으면 계산된 속성은 재계산되지 않고 기존의 값을 사용함. 이는 Vue의 반응형 시스템 덕분에 가능하며, 불필요한 계산을 피함으로써 성능 최적화에 기여함.

computed: {
  reversedMessage() {
    console.log('Recalculating reversedMessage');
    return this.message.split('').reverse().join('');
  }
}

 

 

4. 계산된 속성의 getter와 setter

계산된 속성은 기본적으로 getter로 동작하지만, setter를 정의하여 값을 수정할 수도 있음. 이를 통해 계산된 속성에 양방향 데이터 바인딩을 적용할 수 있음.

computed: {
  fullName: {
    // getter: fullName 값을 가져올 때 호출됨
    get() {
      return `${this.firstName} ${this.lastName}`;
    },
    // setter: fullName 값을 변경할 때 호출됨
    set(newValue) {
      const names = newValue.split(' ');
      this.firstName = names[0];
      this.lastName = names[1];
    }
  }
},
data: {
  firstName: 'John',
  lastName: 'Doe'
}

 

• getter는 firstName과 lastName을 결합한 계산된 값을 반환함.
• setter는 fullName을 직접 수정할 때 firstName과 lastName을 각각 변경함.

<p>{{ fullName }}</p>  <!-- John Doe 출력 -->
<input v-model="fullName"> <!-- fullName을 입력 필드로 양방향 바인딩 -->

• getter는 fullName을 출력할 때 호출되고, setter는 v-model을 통해 입력된 값을 처리함.

5. 계산된 속성 vs Watcher

계산된 속성과 **워치(Watch)**는 둘 다 데이터 변화를 기반으로 반응형 동작을 구현할 수 있지만, 그 사용 목적이 다름.

계산된 속성:

• 다른 데이터에 의존하여 자동으로 계산된 값을 반환함.
• 복잡한 연산이나 다른 데이터의 조합을 처리하는 데 유리함.

워치(Watch):

• 특정 데이터가 변경될 때 명시적으로 수행해야 하는 작업을 정의함.
• 주로 비동기 작업이나 데이터 변화에 따른 추가 작업이 필요할 때 사용됨.
• 워치 예시 : 

watch: {
  message(newVal, oldVal) {
    console.log(`message changed from ${oldVal} to ${newVal}`);
  }
}

• **message**가 변경될 때마다 그 변화를 감지하고, 특정 작업을 수행할 수 있음.

 

6. 계산된 속성의 유용한 활용 예시

(1) 다양한 데이터를 기반으로 한 동적 값 계산

여러 데이터의 변화를 기반으로 자동으로 갱신되는 값을 계산할 때 사용.

computed: {
  totalPrice() {
    return this.quantity * this.pricePerItem;
  }
},
data: {
  quantity: 5,
  pricePerItem: 100
}

• **totalPrice**는 quantity나 pricePerItem이 변경될 때마다 자동으로 계산됨.

(2) 상태 기반 UI 업데이트

계산된 속성을 사용해 UI에서 상태에 따라 특정 동작을 다르게 처리할 수 있음.

computed: {
  isEligible() {
    return this.age >= 18;
  }
},
data: {
  age: 16
}

• **isEligible**은 사용자가 18세 이상인지 여부를 자동으로 계산하여 반환함.

 

요약:

• **계산된 속성(Computed Property)**은 Vue에서 데이터 변화를 기반으로 자동으로 값을 계산하고, 캐싱을 통해 성능을 최적화함.
• 계산된 속성은 의존하는 데이터가 변경될 때만 다시 계산되며, 메서드와 달리 캐싱된 값을 반환함.
• getter와 setter를 정의할 수 있으며, 이를 통해 양방향 바인딩도 가능함.
• 복잡한 연산이나 여러 데이터 조합을 처리할 때 유용하게 사용됨.