0Pricing
Frontend Academy · 강의

computed()와 watch()

computed()로 값을 지연 계산하고, watch()와 watchEffect()로 상태 변경에 반응하며, flush 타이밍을 제어합니다.

computed()와 watch()은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

컴포지션 API의 computed()

computed(fn)은 다른 반응형 원천에서 값을 파생하는 읽기 전용 반응형 ref를 만듭니다. 값은 캐시되므로 종속성이 변경될 때만 getter가 실행됩니다.

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

const items = ref([{ price: 10 }, { price: 20 }, { price: 30 }]);
const tax = ref(0.1);

const subtotal = computed(() => items.value.reduce((s, i) => s + i.price, 0));
const total = computed(() => subtotal.value * (1 + tax.value));
</script>

쓰기 가능한 computed()

가져오기와 설정 기능이 있는 객체를 전달하면 쓰기 가능한 computed를 만들 수 있습니다. setter가 업데이트를 처리하며, 일반적으로 변경 내용을 원본 ref에 반영합니다.

const firstName = ref('Alice');
const lastName  = ref('Smith');

const fullName = computed({
  get: () => `${firstName.value} ${lastName.value}`,
  set: (val: string) => {
    [firstName.value, lastName.value] = val.split(' ');
  }
});

fullName.value = 'Bob Jones'; // sets both refs

watch() 기초

watch(source, callback)은 원천이 변경될 때 콜백을 실행합니다. 콜백은 새 값과 이전 값을 받습니다.

import { ref, watch } from 'vue';

const query = ref('');

watch(query, (newVal, oldVal) => {
  console.log(`Changed from '${oldVal}' to '${newVal}'`);
  searchAPI(newVal);
});

ref와 reactive 감시하기

ref는 직접 감시합니다. 반응형 속성을 감시하려면 getter 함수 () => state.prop를 사용합니다.

const count = ref(0);
watch(count, val => console.log('count:', val));

const state = reactive({ count: 0, name: '' });
watch(() => state.count, val => console.log('state.count:', val));

깊은 감시

{ deep: true }를 전달하면 객체 ref 내부의 중첩된 변경을 감시할 수 있습니다.

const user = ref({ name: 'Alice', address: { city: 'NY' } });

watch(user, (newUser) => {
  console.log('user changed:', newUser);
}, { deep: true });

즉시 감시

{ immediate: true }를 전달하면 변경이 발생하기 전 설정 단계에서 콜백을 즉시 실행합니다. 초기 값으로 부수 효과를 실행하려는 경우에 유용합니다.

watch(userId, async (id) => {
  user.value = await fetchUser(id);
}, { immediate: true }); // runs once on setup, then on change

watchEffect()

watchEffect(fn)은 콜백을 즉시 실행하고, 콜백 내부에서 사용한 반응형 종속성이 변경될 때마다 다시 실행합니다. 원천을 명시적으로 지정할 필요가 없습니다.

import { watchEffect } from 'vue';

watchEffect(() => {
  // runs immediately and whenever query or page changes:
  fetchResults(query.value, page.value);
});

watchEffect와 watch

watchEffect는 즉시 실행되고 종속성을 자동으로 추적하며 이전 값에 접근할 수 없습니다. watch는 원천을 명시하고 기본적으로 지연 실행되며 이전 값과 새 값에 접근할 수 있습니다. 선언적인 부수 효과에는 watchEffect를 사용하고, 실행 시점이나 빈도를 제어해야 할 때는 watch를 사용합니다.

감시 중지

watch와 watchEffect는 모두 stop 함수를 반환합니다. 이를 호출하면 감시를 중지할 수 있습니다.