[Vue3] Computed에 대해 ChatGPT에게 물어보기

Vue3의 Computed에 대해 ChatGPT에게 물어봤습니다.

---

vue3의 computed는 어떤 용도야? 예시를 들어 쉽게 설명해줘

 

Vue 3의 computed는 Vue 인스턴스의 상태를 기반으로 계산된 값을 반환하는 함수입니다. computed는 Vue의 반응성 시스템을 활용하여, 의존하는 상태가 변경될 때마다 다시 계산되며, 계산된 값을 캐시하여 중복 계산을 피합니다.

예를 들어, 다음과 같은 Vue 컴포넌트가 있다고 가정해봅시다.

<template>
  <div>
    <p>원의 반지름: {{ radius }}</p>
    <p>원의 넓이: {{ area }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radius: 5,
    };
  },
  computed: {
    area() {
      return Math.PI * this.radius ** 2;
    },
  },
};
</script>

이 컴포넌트는 radius라는 상태를 가지고 있고, 이를 기반으로 area라는 계산된 값을 가집니다. area는 computed 속성에 정의된 함수를 통해 계산됩니다. 이 때, computed 내부에서 참조하는 this.radius는 Vue의 반응성 시스템에 의해 관찰되며, radius가 변경될 때마다 자동으로 area가 다시 계산됩니다.

이러한 방식으로 computed를 활용하면, 간단한 계산뿐만 아니라, 좀 더 복잡한 계산도 구현할 수 있습니다. 예를 들어, 컴포넌트에서 데이터를 필터링, 정렬, 조합하는 경우에도 computed를 사용할 수 있습니다.

---

<template>
  <div>
    <input type="text" placeholder="반지름" v-model="radius" />
    <p>원의 넓이: {{ area }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radius: 5,
    };
  },
  computed: {
    area() {
      return Math.PI * this.radius ** 2;
    },
  },
};
</script>

위가 그 예시이다.

반지름 항목에 숫자를 넣으면 원 넓이를 계산해준다.