computed와 watch: 명확한 개념과 활용 예시

 

 

Vue.js에서 데이터 변화에 따라 UI를 동적으로 업데이트하는 것은 매우 중요한 기능입니다. 이를 위해 Vue.js는 computed와 watch라는 두 가지 강력한 도구를 제공합니다. 하지만 두 개념을 명확하게 이해하지 못하면 개발 과정에서 혼란을 겪을 수 있습니다. 이 글에서는 computed와 watch의 차이점을 명확하게 설명하고, 실제 개발 환경에서 어떻게 활용해야 하는지 다양한 예시와 함께 자세히 알아보겠습니다.

computed와 watch: 무엇이 다를까?

computed는 데이터의 변화에 따라 계산된 값을 반환하는 데 사용됩니다. 즉, 특정 데이터가 변경될 때마다 자동으로 계산되어 새로운 값을 출력합니다. 반면, watch는 데이터의 변화를 감시하여 특정 이벤트를 트리거하는 데 사용됩니다. 즉, 데이터가 변경될 때 특정 함수를 실행하거나 비동기 작업을 수행할 수 있습니다.

 

---

728x90

 

computed와 watch – 더 명확한 예시로 구분해보기

---

1. 상황: 상품 가격 계산기

• 사용자가 상품 가격과 수량을 입력하면 총 가격이 자동으로 계산됩니다.
• 그러나, 할인 쿠폰을 적용할 때는 외부 API를 호출해 할인율을 조회해야 합니다.

---

computed 사용 – 총 가격 계산 (간단하고 빠른 계산)

<div id="app">
  <p>상품 가격: <input v-model="price"></p>
  <p>수량: <input v-model="quantity"></p>
  <p>총 가격: {{ totalPrice }} 원</p>
</div>

const vm = Vue.createApp({
  data() {
    return {
      price: 1000,
      quantity: 1
    };
  },
  computed: {
    totalPrice() {
      return this.price * this.quantity;
    }
  }
}).mount('#app');

---

코드 설명 (computed)

• 사용자가 가격이나 수량을 변경하면 totalPrice가 자동으로 업데이트됩니다.
• 가격과 수량이 변경되지 않는 한, 다시 계산하지 않고 캐싱된 값을 사용합니다.
• 빠르고 간단한 계산에 적합합니다.

---

2. watch 사용 – 할인 쿠폰 API 호출 (비동기 작업)

<div id="app">
  <p>쿠폰 코드: <input v-model="couponCode"></p>
  <p>할인율: {{ discount }} %</p>
</div>

const vm = Vue.createApp({
  data() {
    return {
      couponCode: '',
      discount: 0
    };
  },
  watch: {
    couponCode(newCode) {
      this.fetchDiscount(newCode);
    }
  },
  methods: {
    fetchDiscount(code) {
      // 예시: API 호출 (비동기 작업)
      setTimeout(() => {
        if (code === 'SALE10') {
          this.discount = 10;
        } else {
          this.discount = 0;
        }
      }, 1000); // 1초 후 할인율 적용
    }
  }
}).mount('#app');

---

코드 설명 (watch)

• 사용자가 쿠폰 코드를 입력할 때마다 watch가 감지하고 할인율을 API에서 조회합니다.
• 비동기 API 호출이나 복잡한 로직을 트리거할 때 watch가 적합합니다.
• computed는 비동기 작업을 처리할 수 없기 때문에 이런 경우 watch를 사용해야 합니다.

---

computed vs watch – 명확한 비교 (상품 가격 vs 쿠폰 할인)

구분	computed	watch
역할	데이터 변경에 따라 값을 자동 계산	데이터 변경 시 API 호출 등 로직 실행
예시	price * quantity로 총 가격 계산	쿠폰 코드를 감지해 할인율 조회 API 호출
속도	빠름 (간단한 연산)	느릴 수 있음 (비동기 API 호출 포함)
캐싱	결과를 캐싱해 불필요한 재계산 방지	매번 값이 바뀔 때마다 새로 실행
비동기 작업	불가능 (동기 작업만 가능)	가능 (API 호출, 타이머 등)

 

---

결론 – 상황별 사용 기준

• 간단한 계산이나 UI에 즉시 반영되는 경우 → computed
• 비동기 API 호출, 폼 유효성 검사 등 **부수 효과(side effect)**가 필요한 경우 → watch

---

비유로 이해해보기

• computed는 계산기처럼 단순한 연산을 빠르게 수행합니다.
• watch는 경비원처럼 지켜보다가 특정 조건에서 알람을 울리거나, 외부에 연락을 합니다.

이렇게 구분하면 두 개념이 훨씬 명확해집니다. 😊

 

728x90

---

 

별차이가 없는것같은데.. 만일 서로 바꾸면 뭐가 문제가 되지 ?

 

서로 바꿀 수는 있지만, 효율성과 동작 방식에서 차이가 생깁니다.
간단히 말해, computed와 watch는 겉보기 결과는 같아도 동작 방식이 다르기 때문에 적합하지 않은 경우가 있습니다.

---

1. computed 대신 watch를 사용하면 발생하는 문제

문제 상황

const vm = Vue.createApp({
  data() {
    return {
      price: 1000,
      quantity: 1,
      totalPrice: 0
    };
  },
  watch: {
    price(newVal) {
      this.totalPrice = newVal * this.quantity;
    },
    quantity(newVal) {
      this.totalPrice = this.price * newVal;
    }
  }
}).mount('#app');

---

문제점

• price나 quantity가 변경될 때마다 두 번의 watch가 각각 실행됩니다.
• 코드가 복잡해지고, 값이 바뀔 때마다 불필요하게 중복 계산이 발생합니다.
• 반응 속도가 느려지고 성능 저하가 생길 수 있습니다.

computed로 교체하면?

computed: {
  totalPrice() {
    return this.price * this.quantity;
  }
}

• 단 하나의 계산으로 처리됩니다.
• 종속된 값(price, quantity)이 변경될 때만 계산이 수행되고, 불필요한 재계산이 방지됩니다.

---

2. watch 대신 computed를 사용하면 발생하는 문제

문제 상황

const vm = Vue.createApp({
  data() {
    return {
      couponCode: '',
      discount: 0
    };
  },
  computed: {
    discount() {
      if (this.couponCode === 'SALE10') {
        this.fetchDiscount();
      }
      return 0;
    }
  },
  methods: {
    fetchDiscount() {
      // API 호출
      console.log('API 호출: 할인율 조회');
    }
  }
}).mount('#app');

---

문제점

• 비동기 API 호출은 computed에서 직접 수행되지 않습니다.
• computed는 즉시 값을 반환해야 하는데, 비동기 작업이 끝나기 전에 반환됩니다.
• 결과적으로 API 호출이 제대로 이루어지지 않거나, 예상치 못한 동작이 발생할 수 있습니다.

watch로 교체하면?

watch: {
  couponCode(newVal) {
    this.fetchDiscount();
  }
}

• couponCode가 바뀔 때만 API 호출이 정확하게 수행됩니다.
• 비동기 작업을 watch 내부에서 안전하게 처리할 수 있습니다.

---

정리 – 서로 바꿀 수 있지만…

상황	computed가 적합한 경우	watch가 적합한 경우
계산 로직	간단하고 동기적인 계산	비동기 작업(API 호출 등)
속도	빠르고 캐싱 가능	느릴 수 있음 (매번 호출)
결과	즉시 반환	비동기 작업은 결과가 지연됨
실행 횟수	종속된 데이터가 변경될 때만 실행	데이터 변경을 감지하는 즉시 실행
복잡도	간단 (단일 함수)	복잡 (다수의 watch와 조건문 필요)

---

결론

• 바꿔서 사용할 수 있지만, 부적절한 사용은 성능 저하, 코드 복잡성 증가, 예상치 못한 동작으로 이어질 수 있습니다.
• computed는 데이터 기반으로 값을 반환해야 할 때
• watch는 데이터 변경을 감지해 부수 효과를 실행해야 할 때
  

이렇게 나눠서 사용하면 가독성과 성능이 개선됩니다.