[Vue.js] computed를 사용하여 계산된 속성 만들기

<template>
  <div>
    <p>현재 카운트: {{ count }}</p>
    <p>짝수 여부: {{ isEven }}</p>
    <button @click="increment">증가</button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 반응성 있는 변수 생성
const count = ref(0);

// count가 짝수인지 여부를 계산하는 computed 속성
const isEven = computed(() => {
  return count.value % 2 === 0 ? '짝수' : '홀수';
});

// count를 증가시키는 함수
const increment = () => {
  count.value++;
};
</script>

<style scoped>
/* 컴포넌트의 스타일을 여기에 작성합니다. */
</style>

Vue.js에서는 computed를 사용하여 계산된 속성을 만들 수 있습니다. 이를 활용하면 반응성 데이터를 기반으로 계산된 값을 효율적으로 제공할 수 있습니다.

위의 예제는 카운트 변수를 생성하고, 해당 변수가 짝수인지 여부를 계산하는 computed 속성을 만드는 예제입니다. count 변수의 값을 변경할 때마다 isEven 속성이 자동으로 다시 계산되어 화면에 출력됩니다.

computed를 사용하면 특정 상태에 기반하여 동적으로 값을 계산할 수 있으며, 이는 화면을 다시 렌더링할 때 효율적으로 사용될 수 있습니다. 따라서 코드의 가독성과 유지보수성을 높일 수 있습니다.