Vue3 반응형 API `computed `와 `watch`

💬 Vue3의 computed와 watch는 반응형 데이터를 다룰 때 사용하는 기능이다. 둘 다 반응형 데이터의 변화를 감지하고 값을 업데이트하는 데 사용되지만, 사용 목적과 동작 방식이 다르다. 각각의 역할과 차이점을 정리해보기.🧐

---

computed : 계산된 속성 (Computed Properties)

◼️computed는 반환 값이 특정 반응형 상태에 따라 자동으로 변경되는 속성이다.

📌 특징
▪️ 종속된 반응형 데이터가 변경될 때만 자동으로 재계산됨
▪️ 캐싱 기능이 있어서 종속된 데이터가 바뀌지 않으면 기존 값 재사용

📌 사용 예제

<script setup lang="ts">
import { ref, computed } from "vue";

const price = ref(1000);
const quantity = ref(2);

// 총 가격을 자동 계산 (price 또는 quantity가 변경될 때만 실행됨)
const totalPrice = computed(() => price.value * quantity.value);
</script>

<template>
  <div>
    <p>가격: {{ price }}원</p>
    <p>수량: {{ quantity }}개</p>
    <p>총 가격: {{ totalPrice }}원</p>
  </div>
</template>

📌 작동 방식
▪️ price 또는 quantity가 변경될 때만 totalPrice가 자동 재계산됨
▪️ 만약 price와 quantity가 변하지 않으면 기존 값을 캐싱해서 성능 최적화

---

watch: 반응형 데이터 감지 (Watchers)

◼️watch는 이벤트 감지에 가깝고, 비동기 작업이나 외부 API 호출 시 주로 사용된다.

📌 특징
▪️ 특정 반응형 데이터를 감지하고, 값이 변경될 때 실행할 로직을 정의하는 기능
▪️ 즉시 실행되는 것이 아니라 데이터 변경이 감지될 때만 실행됨
▪️ 이벤트 감지에 가깝고 비동기 작업이나 외부 API 호출 시 주로 사용됨

📌 사용 예제

<script setup lang="ts">
import { ref, watch } from "vue";

const username = ref("John Doe");

// username이 변경될 때마다 실행됨
watch(username, (newVal, oldVal) => {
  console.log(`이름이 ${oldVal}에서 ${newVal}로 변경됨!`);
});
</script>

<template>
  <input v-model="username" />
</template>

▪️ 객체 전체 감시하는, 깊은 감시(deep watch) 설정할 수도 있음.

const user = ref({
    name: 'Alice',
    age: 25
});

// user 객체 전체를 감시하려면 { deep: true } 옵션 필요
watch(user, (newVal, oldVal) => {
    console.log('user 변경됨:', newVal);
}, { deep: true });

---

computed vs watch 차이점

---

언제 computed와 watche를 사용할까?

◼️ computed : 데이터를 변형해서 사용할 때 (값을 만들고 싶을 때)
ㅤㅤ🠊 예) fullName, filteredList
◼️ watch : 데이터 변경을 감지해서 특정 로직을 실행할 때
ㅤㅤ🠊 예) API 호출, 로컬 스토리지 저장, 디버깅