[Udemy Vue 완벽가이드 Section2] 29. 연산(Computed) 프로퍼티 소개

method를 호출하여 반환값을 넣는 대신, 코드 자체를 넣는 방법도 있다.

<p>Your name: {{ outputFullname() }}</p> <!--메서드 호출-->
<p>Your name: {{ name + ' ' + 'Schwardud' }}</p> <!--코드 자체를 넣음-->

<script>
  methods: {
    outputFullname() {
      return this.name + " " + "Schwarzu";
    },
</script>

 

 

아래 p요소처럼 코드 자체를 넣으면 화면에 변경이 생길 때마다 Vue에 의해 메서드가 재실행되는 문제를 피할 수 있다.

Vue가 이 코드에서 무엇이 사용되었는지 인식할 수 있기 때문.

위 경우엔 name이 변경된 경우에만 재평가된다.

 

하지만 HTML코드에 로직이 생겼다. → 이건 좋은 방법이 아니다.

로직은 JavaScript 파일에 작성!

 

이를 위해, 멋진 기능인 computed 프로퍼티가 있다!

computed프로퍼티는 메서드와는 다른 한 가지 중요한 차이점이 있다.

바로..

Vue가 의존성을 인식하고 의존성 중 하나가 변경된 경우에만 재실행한다.

반면 method는 화면이 변경될 때마다 재실행된다. (굉장히 비효율적이다.)

 

 

 

#computed 프로퍼티

- 우리가 만든 앱에서 세번째로 큰 구성 옵션이다. 첫 번째는 data, 두 번째는 methods, 세번째는 computed.

data, methods 사이에 적든 제일 뒤에 적든 위치는 상관없다.

- computed는 선택할 수 있는 이름이 아니라, 그대로 사용해야하는 이름이다.(예약어)

- methods처럼 객체를 취한다. 객체를 값으로 전달하여 연산.

- methods와 마찬가지로 객체 안에 method를 정의.

  하지만 computed에서 정의한 method는 다른 방식으로 호출되고 실행된다. 이게 바로 methods와 블록이 구분되어 있는 이유.

- computed 프로퍼티의 객체 내 메서드의 네이밍을 원하는 대로 지정할 수 있지만, outputFullname처럼 하지는 않는다. 왜냐하면 computed는 메서드가 아니라 data 프로퍼티처럼 사용하기 때문. 따라서 outputFullname → fullname 이렇게

- 기술적으론 method이지만, method처럼 사용하지 않고 호출하지도 않는다. 그래서 computed 프로퍼티 이름은 data 프로퍼티처럼 정해야한다. 

<p>Your name: {{ fullname }}</p> <!--괄호없이 입력-->

computed: { //computed프로퍼티는 객체를 취함
 fullname(){ //객체 안에 메서드를 취한다.
  console.log('Running again..');
  if(this.name === '') {
   return '';
  }
  return this.name + ' ' + 'Schwarzu';
 },
},
methods: {
 outputFullname(){
   console.log('Running again..');
  if(this.name === '') {
   return '';
  }
  return this.name + ' ' + 'Schwarzu';
 },
}

 

- 앱이 처음 실행될 때(앱이 처음 렌더링될 때)는 fullname이 렌더링한 값을 평가해야하므로, fullname 메서드 내의 'Running again...'이 콘솔에 찍힌다.

- counter를 변경하면 methods의 outputFullname과는 다르게 'Running again...'은 콘솔에 찍히지 않는다.

- input창에 입력값을 입력할 경우, 콘솔이 찍힌다. 왜냐하면 하나하나 칠때마다 name이 변경되기 때문. computed 프로퍼티에 사용된 뭔가를 변경했기 때문.

- computed 프로퍼티를 사용하면, Vue는 computed 프로퍼티의 의존성을 인식한다. 위 fullname의 경우, name이 의존성.

computed 프로퍼티값을 캐시에 저장하고, 의존성(여기선 name)이 변경된 경우에만 재계산하고 재평가한다.

- 성능면에서 값을 출력하는 대부분의 경우, methods보다 computed 프로퍼티를 사용하는 것이 좋다. 화면에서 어떤 항목이 변경되든 값을 재계산하려는 경우에만 method를 사용해라. (대부분은 그렇지 않다.)

- 보통 의존성이 변경되는 경우에만 재계산하길 원한다. 이런 경우가 바로 computed 프로퍼티가 빛을 발하는 순간! 의존성이 변경되는 경우에만 재계산하는 computed 프로퍼티가 좋다.

- 여전히 메서드가 필요할 때가 있다. 뭔가 하나라도 변경될 때마다 재계산하려는 경우, 또는 더 많은 경우는 event를 가지고 있고, event가 발생하면 특정 메서드가 트리거되기를 원할 경우.

<button v-on:click="reduce">Subtract 5</button>

 

위와 같은 경우는 event를 methods에 바인딩하지, computed에 바인딩하지는 않는다.

fullname같이 값을 출력하는 경우에만 computed 프로퍼티 사용.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.