[Vue.js] Vue 컴퓨티드(computed) 속성 이해와 활용하기

컴퓨티드(computed)란?

Vue.js에서 컴퓨티드(computed)는 템플릿 내에서 표현식 대신 계산된 속성을 선언하는 방법입니다. 컴퓨티드 속성은 종속성에 따라 캐싱되며, 종속성이 변경될 때만 다시 계산됩니다. 이를 통해 템플릿에서 반복적으로 계산되는 값들을 효율적으로 관리할 수 있습니다.

예제

아래 예제에서는 사용자의 나이(age)와 성인 여부(isAdult)를 계산하는 컴퓨티드 속성을 선언하는 예제를 보여줍니다.

<template>
  <div>
    <p>나이: {{ age }}</p>
    <p>성인 여부: {{ isAdult }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      birthYear: 1990,
      currentYear: new Date().getFullYear()
    };
  },
  computed: {
    age() {
      return this.currentYear - this.birthYear;
    },
    isAdult() {
      return this.age >= 18 ? '성인' : '미성년자';
    }
  }
}
</script>

설명

• age 컴퓨티드 속성은 birthYear와 currentYear 데이터 속성을 이용하여 계산됩니다. 이 속성은 사용자의 나이를 계산합니다.
• isAdult 컴퓨티드 속성은 age 컴퓨티드 속성을 이용하여 성인 여부를 계산합니다. 만약 나이가 18세 이상이면 '성인', 그렇지 않으면 '미성년자'를 반환합니다.

주요 특징

• 캐싱: 컴퓨티드 속성은 종속성에 따라 캐싱되기 때문에 계산 효율성이 높습니다.
• 리액티브: 종속성이 변경될 때만 다시 계산되므로 효율적인 리액티브 시스템을 구성할 수 있습니다.

해시태그

Vue.js, Frontend, WebDevelopment, JavaScript