[ Vue ] computed의 getter/setter와 주의사항

computed()

반응형 데이터를 포함하는 복잡한 논리를 표현할 때 사용하는 계산된 속성

 

계산된 ref를 반환하기 때문에 computed 값 또한 .value를 통해 접근한다. (템플릿 표현식에서는 .value 없이 참조 가능)

 

computed는 해당 computed 값이 의존 중인 반응형 데이터 ref, reactive 등의 변경을 자동으로 추적한다.

 

computed는 의존된 반응형을 기반으로 캐시된다.

const scores = ref([100, 80, 88, 50, 70, 90, 96])

const average = computed(() => {
  const sum = scores.value.reduce((sum, item) => (sum += item), 0)
  return sum / scores.value.length
})

위의 코드에서 average는 scores가 변경될 때만 새로 계산되며, scores가 변경되지 않은 한 average에 접근될 때 캐싱된 계산된 결과를 반환한다.

 

 

---

 

계산된 속성 (getter)

const pagesNumber = computed(() => {
  return Math.ceil(noticeList.value.length / 10);
});

반응형 속성에 의존해 계산된 값을 반환할 때 사용한다.

 

const num = ref(80)

const isHigher = computed(() => {
  if (num.value > average.value) return true
  else return false
})

조건문도 사용 가능

 

 

---

 

수정 가능한 계산된 속성 (setter)

computed는 기본적으로 getter 전용이기 때문에 새로운 값을 할당하려고 하면 런타임 에러가 발생한다.

그렇기 때문에 수정 가능한 computed가 필요하다면, getter와 setter를 모두 제공하여 속성을 만들 수 있다.

const selectedValue = computed({
	// 상위 컴포넌트의 변수를 전달받는 getter
  get: () => {
    return props.value;
  },
  // 상위 컴포넌트의 변수를 변경하는 setter
  set: (value) => {
    emit('update:value', value);
  },
});

 

 

 

---

 

주의사항

계산된 getter 안에서는 부작용을 일으키는 작업(상태 변경, 비동기 요청, DOM 조작 등)을 하면 안 된다.

 

그렇다면 setter 안에서는?

→ setter는 가능ㅇㅇ

 

setter는 특정 값이 할당될 때 실행되는 함수이기 때문에, 그 안에서 상태 변경이나 다른 로직을 수행하는 것이 가능하다.

그러나 setter에서도 DOM을 직접 변경하거나 비동기 요청을 다루는 것은 일반적으로 권장되지 않는다. 이러한 작업은 더 명확한 의도와 흐름을 제공하는 메서드나 라이프 사이클 훅에서 처리하는 것이 권장된다.

 

const selectedValue = computed({
  get: () => {
    return props.value;
  },
  set: async (value) => {
  	// 비동기 요청을 통한 상태 변경
    if (value) options.value = await getStkItem(value.dtlNm);
    else options.value = [];
    emit('update:value', value);
  },
});

→ 사실 권장되지 않는 패턴임

 

WHY?

비동기 작업이 반응성 시스템에 혼란을 줄 수 있다.

computed 속성은 순수하게 동기적으로 값을 즉시 반영할 수 있어야 하는데, 비동기 작업이 수행되면 이러한 computed의 반응성 시스템과 충돌할 수 있다. (Vue의 반응성 시스템이 예상치 못한 시점에 상태 변경 발생)

 

→ 비동기 작업을 처리해야 한다면 watch나 methods를 사용하는 것이 더 적절하다.

(비동기 작업과 상태 변경을 명확히 분리)

watch(selectedValue, async (newValue) => {
  if (newValue) options.value = await getStkItem(newValue.dtlNm);
  else options.value = [];
  emit('update:value', newValue);
});