[Nuxt3] ref()와 computed() 차이점

요약

사용 상황	ref()	computed()
기본적인 반응형 상태 관리	✔️	❌
상태를 기반으로 새 값 계산	❌	✔️
값이 변경될 때만 재계산 필요	❌	✔️
상태 변경 가능해야 함	✔️	❌ (기본 읽기 전용)

 

1. ref() – 반응형 데이터 만들기

ref()는 간단한 값(숫자, 문자열, 객체 등)을 반응형으로 관리할 때 사용합니다.

import { ref } from "vue";

const count = ref(5);
console.log(count.value); // 5

count.value++; // 값 변경
console.log(count.value); // 6

ref()의 특징

• .value를 통해서만 값을 읽거나 쓸 수 있습니다.
• Vue가 값 변경을 자동으로 추적하여 UI를 업데이트합니다.

객체를 ref()로 사용할 경우

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

// 객체 내부 값도 반응형으로 유지
user.value.name = "Bob";
console.log(user.value.name); // Bob

객체의 경우에도 .value를 통해 접근해야 하지만, 내부 속성은 모두 반응형으로 동작합니다.

2. computed() – 계산된 값 자동 업데이트

computed()는 기존 반응형 상태를 기반으로 자동으로 새로운 값을 계산할 때 사용합니다.

import { ref, computed } from "vue";

const count = ref(5);

// count.value가 변경되면 doubleCount도 자동으로 업데이트됨
const doubleCount = computed(() => count.value * 2);

console.log(doubleCount.value); // 10

count.value = 10;
console.log(doubleCount.value); // 20 (자동 업데이트됨)

computed()의 특징

• 다른 반응형 데이터(ref)를 기반으로 새로운 값을 생성합니다.
• 캐싱(Caching)되어, 의존하는 값이 변경될 때만 재계산됩니다.
• 기본적으로 읽기 전용입니다.

읽기/쓰기 가능한 computed()

const count = ref(3);

const doubleCount = computed({
  get: () => count.value * 2,
  set: (newValue) => {
    count.value = newValue / 2;
  }
});

// 값을 변경하면 count.value가 자동으로 변경됨
doubleCount.value = 20;
console.log(count.value); // 10
console.log(doubleCount.value); // 20

3. ref()를 computed() 없이 직접 연산하면?

computed() 없이 직접 연산하면 반응형이 아니므로 값이 자동 업데이트되지 않습니다.

import { ref } from "vue";

const count = ref(5);
const doubleCount = count.value * 2; // 초기값을 기준으로 고정됨

console.log(doubleCount); // 10

count.value = 10;
console.log(doubleCount); // 여전히 10

• 초기값만 계산되고 이후에는 업데이트되지 않습니다.

4. computed()를 사용한 올바른 예시

import { ref, computed } from "vue";

const count = ref(5);
const doubleCount = computed(() => count.value * 2);

console.log(doubleCount.value); // 10

count.value = 10;
console.log(doubleCount.value); // 20

computed()를 사용하면 값이 변경될 때 자동으로 업데이트됩니다.

5. computed()와 watch()의 차이점

• computed(): 상태를 기반으로 자동 계산된 값을 반환합니다.
• watch(): 상태 변화 시 특정 로직을 실행합니다. watch()는 API 호출 등 부수 효과(side-effects)를 처리할 때 유용합니다.

import { ref, watch } from "vue";

const count = ref(0);

watch(count, (newVal, oldVal) => {
  console.log(`count가 ${oldVal} → ${newVal}로 변경됨`);
});

count.value = 5; // count가 0 → 5로 변경됨

 

6. computed()와 methods()의 차이점

• methods: 호출할 때마다 항상 다시 실행됩니다.
• computed: 의존하는 상태가 변할 때만 실행되어 성능상 효율적입니다.

methods: {
  doubleCount() {
    return this.count * 2;
  }
}

computed: {
  doubleCount() {
    return this.count * 2;
  }
}