[Vue.js] compositionAPI에서 computed 사용법

 

📌1. Computed 속성이란? 

Computed 속성은 간단한 계산을 수행해주는 반응형 속성을 의미합니다. computed를 사용하면 데이터가 변경될 때마다 자동으로 업데이트 해주기 때문에 동적으로 변하는 데이터를 효율적으로 처리할 수 있습니다😉

또한, computed 속성은 데이터가 변경되지 않는 한, 한번 계산된 값을 들고있다가 필요할 때마다 재사용합니다.  이는 불필요한 계산을 방지해서 성능을 향상시켜 줍니다.

 

📌 2. Composition API에서 computed를 사용하기

Composition API에서도 계산된 속성과 동일한 기능을 computed 함수를 이용해서 작성할 수 있습니다. computed 속성은 함수로 정의되지만, 속성처럼 접근할 수있어서 계산된 값을 쉽게 가져올 수 있습니다. 🚨 computed함수 에서 생성된 계산된 속성은 템플릿에서 직접 사용할 수 있습니다. 그러나 <script>내부에서 데이터에 접근할 때는 반드시 '.value' 속성을 통해 접근해야 합니다.
예제는 <script setup> 구문을 사용하여 작성하였습니다.

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

const firstName = ref('김');
const lastName = ref('하나');

const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`;
});

</script>

<template>
  <div>
    <p>First Name: {{ firstName }}</p>
    <p>Last Name: {{ lastName }}</p>
    <p>Full Name: {{ fullName }}</p>
  </div>
</template>