[Vue] 3단계: computed, watch — 반응형 계산과 상태 변화 감지

✅ 3단계: computed, watch — 반응형 계산과 상태 변화 감지

✅ 1. computed: 자동으로 계산되는 값

💡 개념 정리

• computed는 기존 상태를 바탕으로 파생된 값을 자동으로 계산해줘.
• 종속된 상태(ref, reactive)가 바뀌면 자동으로 재계산됨.
• 성능상 이점도 있어: 변경되지 않으면 캐싱됨.

---

✅ 기본 예제

import { ref, computed } from 'vue'

const firstName = ref('예은')
const lastName = ref('이')

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

<p></p>

• fullName.value는 firstName 또는 lastName이 바뀔 때만 다시 계산됨

---

✅ 타입 지정도 가능

const count = ref(3)

const double = computed<number>(() => count.value * 2)

---

✅ 2. watch: 상태 변화 감시 후 부가 작업 실행

💡 개념 정리

• watch()는 특정 상태가 변화했을 때 무언가 추가 동작을 하고 싶을 때 사용해.
• 데이터가 바뀌어도 자동 계산만 하고 끝인 computed와 달리, watch는 **부작용(side-effect)**을 처리할 수 있어.

---

✅ 기본 예제

import { ref, watch } from 'vue'

const name = ref('예은')

watch(name, (newValue, oldValue) => {
  console.log(`이름이 ${oldValue} → ${newValue}로 바뀜`)
})

• name.value가 바뀔 때마다 함수 실행됨

---

✅ 옵션 예시

watch(name, handler, {
  immediate: true, // 초기 실행
  deep: true       // 객체 내부까지 감시
})

---

🔁 computed vs watch 비교

항목	computed	watch
언제 실행됨?	의존 값이 바뀌면 자동 재계산	값이 바뀌는 순간에만 실행
리턴값 있음?	✅ 있음	❌ 없음 (함수 실행만)
용도	UI 표시용 값	부가 로직 실행 (알림, 저장 등)
캐싱	✅ 됨	❌ 안 됨

---

🎯 실습 미션: 이름 길이에 따라 메시지를 자동으로 바꾸기

목표:

• 이름이 10자 이상이면 computed로 "이름이 너무 길어요!" 메시지 생성
• 이름이 바뀔 때마다 watch로 콘솔에 로그 찍기

---

🧪 실습 코드 예시

<template>
  <input v-model="name" />
  <p></p>
</template>

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

const name = ref('')

const warningMessage = computed(() => {
  return name.value.length > 10 ? '이름이 너무 길어요!' : ''
})

watch(name, (newVal, oldVal) => {
  console.log(`이름 변경: ${oldVal} → ${newVal}`)
})
</script>

---

💬 면접 포인트 질문

Q. computed와 watch의 차이를 설명해주세요.

• computed는 상태를 바탕으로 자동 계산되는 파생값을 만들 때 사용
• watch는 상태가 바뀔 때 특정 **부가 작업(side-effect)**을 할 때 사용

---

END