[Vue] Computed의 다양한 사용법

 

 

1. 언제 computed를 사용하나?

어떤 data를 {{ }} 템플릿 안에 표현식으로 가공해서 표현해야할 때 연산이 너무 길어지거나 복잡해지면 유지보수하기가 힘들고 가독성도 떨어지게 됩니다. 그런 복잡한 식이 될 경우 computed 속성을 사용하면 간결하게 표현할 수 있는데요. 예시를 한번 보겠습니다.

만약 예를들어 데이터로 ㎡ 단위의 숫자를 받아서 평수로 계산해서 보여줘야한다면 평수 계산식을 computed 안에서 사용해서 보여주는 편이 좋습니다.

data: function () {
  return {
    size: 3323
  }
},
computed: {
  squareSize: function () {
    if (!this.size) return 0
    return `${Math.round(this.size / 3.305).toFixed(2)}평`
  }

}

 

왜 이러한 계산식을 method를 사용하는 대신 computed를 사용하는 편이 왜 좋을까요? computed는 데이터에 종속되기 때문에 그 데이터가 변경하지 않는 한 그 전의 결과값을 캐싱해서 저장해둡니다. 데이터가 변하지 않는다면 캐싱된 값을 보여줍니다. 그러나 저런 식을 method로 만든다면 method가 호출될 때마다 함수를 실행하게 될 것입니다. 굳이 데이터가 변하지도 않는데 똑같은 함수실행을 계속할 필요는 없겠지요?

 

2. 자주 비교되는 computed와 watch

watch는 감시할 데이터를 지정해놓고, 그 데이터가 변경되면 실행하도록 하는 속성인데요. 이러면 computed와 watch가 거의 차이가 없는 거 아닌가? 하시겠지만 computed는 좀더 반응형 getter에 가깝고 watch는 반응형 콜백에 가깝습니다. computed는 특정한 목적값이 있을 경우 그 연산을 데이터를 받아 computed를 안에서 사용하고, watch는 데이터가 변경될 때 반응하여 특정한 콜백함수를 실행하게 할 때 사용합니다. 

그럼 언제 어떻게 사용하면 좋을까요?

- computed는 data에 할당된 값들의 종속관계를 자동으로 세팅하고 싶을 때 사용합니다. 아까 getter에 가깝다고 했죠? 
- watch는 데이터 값이 변경되었을 때 어떤 함수를 호출할 때 사용합니다. 
- 특정 함수를 요청하기 위함이 아니라면 대부분의 경우 computed가 더 나은 선택입니다.