[Vue] Computed 함수

1. Computed

"계산된 속성"을 정의하는 함수 -> 미리 계산된 속성을 사용하여 템플릿에서 표현식을 단순하게 하고 불필요한 반복 연산을 줄임

2. Computed가 필요한 경우

<h1>오늘의 할 일</h1>
<p>{{ todos.length > 0? '할 일이 남았습니다.' : '할 일 끝!' }}</p>

const todos = ref([
  { text: 'Python 공부' },
  { text: 'Java 공부' },
  { text: 'C++ 공부' },
])

위 코드를 computed를 적용하면

<h1>오늘의 할 일</h1>
<p>{{ todayTodos }}</p>

const { createApp, ref, computed } = Vue 

const todayTodos = computed(() => {
  return todos.value.length > 0? '할 일이 남았습니다.' : '할 일 끝!' 
})

이런 코드가 된다. 반응형 데이터를 포함하는 복잡한 로직의 경우 computed를 활용하여 미리 값을 계산하여 계산된 값을 사용한다.

3. Computed 특징

1) 반환되는 값은 computed ref이며 일반 refs와 유사하게 계산된 결과를 .value로 참조할 수 있다.(템플릿에서는 .value 생략 가능)

2) computed 속성은 의존된 반응형 데이터를 자동으로 추적

3) 의존하는 데이터가 변경될 때만 재평가

4. Computed vs Methods

computed 속성 대신 method로도 동일한 기능을 정의할 수 있다.

const todayTodos = function () { 
  return todos.value.length > 0? '할 일이 남았습니다.' : '할 일 끝!'
}

computed와 method의 차이

1) computed 속성은 **의존된 반응형 데이터를 기반으로 캐시(cached)됨

2) 의존하는 데이터가 변경된 경우에만 재평가됨

3) 즉, 의존된 반응형 데이터가 변경되지 않는 한 이미 계산된 결과에 대한 여러 참조는 다시 평가할 필요없이 이전에 계산된 결과를 즉시 반환

method 호출은 다시 렌더링이 발생할 때마다 항상 함수를 실행함

즉, computed는 의존된 데이터가 변경되면 자동으로 업데이트되고 method는 호출해야만 실행이 된다는 차이점이 있다.

5. computed와 method 적절하게 사용하기

1) computed

• 의존하는 데이터에 따라 결과가 바뀌는 계산된 속성을 만들 때 유용

• 동일한 의존성을 가진 여러 곳에서 사용할 때 계산 결과를 캐싱하여 중복 계산 방지

2) method

• 단순히 특정 동작을 수행하는 함수를 정의할 때 사용

• 데이터에 의존하는지 여부와 관계없이 항상 동일한 결과를 반환하는 함수