[Udemy Vue 완벽가이드 Section2] 28. 데이터 바인딩에 사용되는 메서드 작동원리

지금까지 공부한 것

1. Dom Interaction, Templates & Data Binding

 - DOM의 일부분을 만드는 법을 배웠다. Vue앱을 마운팅해서 Vue앱 템플릿을 만들었다.

Vue.createApp({}).mount('#app');

- 보간법, v-bind, v-html을 이용한 데이터바인딩

 

 

 

2. Event Handling

 - v-on과 v-model을 이용한 이벤트처리. (정확히 말하면 v-model은 양방향 바인딩(데이터바인딩 + 이벤트바인딩))

 

 

 

3. 이제 배울 것 : 고급 반응성

'Advanced' Reactivity : 고급 반응성

Vue는 반응형이다. 이미 많은 곳에서 확인했다. ex: 입력하면 name이 업데이트된다. counter 변경.

 

 

양방향 바인딩을 추가했는데, 추가하기 위해 lastName을 제거해야만 했다.

입력한 이름에 성을 추가하여 전체이름을 만드는 방식이 이상적이진 않기 때문에 제거해도 무방하다.

 

<button v-on:click="add(10)">Add</button>
<button v-on:click="reduce(5)">Reduce</button>
<p>Result: {{ counter }}</p>
<input type="text" v-model="name" />
<p>Your name: {{ outputFullname() }}</p>

const app = Vue.createApp({
  data() {
    return {
      counter: 0,
      name: '',
      confirmedName: ''
    };
  },
  methods: {
    outputFullname(){ //호출하는데 사용할 것이기 때문에 반환해야 한다.
      if(this.name === ''){
        return '';
      }
      return this.name + ' ' + 'Schwarzu';
    },
    add(num){
      this.counter = this.counter + num;
    },
    reduce(num){
      this.counter = this.counter - num;
    },
  }
});

이제 input창에 값을 입력하면 outputFullname의 return값에 의해 입력값 + 'Schwarzu'가 붙는다.

 

하지만 위 방법은 최고의 방법은 아니다.

왜 최고의 방법은 아닐까?

이름을 입력하면 name이 업데이트되고 p요소에 출력되고 좋긴 하다.

문제는, Add/Reduce버튼을 누르면 당장의 문제가 보이지 않지만, Vue가 내부에서 이상적이지 않은 무언가를 한다.

Add/Reduce 버튼을 눌러 counter를 변경할 때 Vue는 기본적으로 이 페이지에서 업데이트할 위치를 찾으려고 한다.

counter가 변경되면 Vue는 아래 p태그에서 counter를 사용하고 있으니 실제 아래 부분을 업데이트하려고 한다.

<p>Result: {{ counter }}</p>

 

문제는 outputFullname()같은 메서드를 호출하면, 페이지에 변경이 생길 때마다 메서드도 Vue에 의해 재실행된다.

Vue는 메서드가 하는 일을 알 수 없기 때문이다. 즉, counter가 outputFullname()에서 사용되는지 여부를 알 수 없다.

물론 counter가 변경되고, outputFullname 메서드가 counter를 사용한다면 outputFullname 메서드가 재실행되는게 맞다. 하지만 위 코드와 같이 outputFullname메서드와 counter는 전혀 관련이 없지만(의존성이 없지만) counter가 변경되어도 outputFullname메서드가 재실행된다.

 

Vue는 HTML 코드 내에 있는 모든 메서드를 재실행한다. 중괄호 사이에 있든, v-bind와 함께 있든 v-on 이벤트에 바인딩되지 않은 모든 메서드는 화면에 변경이 생길때마다 Vue에 의해 재실행된다.

 

 

<p>Your Name: {{ outputFullname() }}</p>

위 outputFullname 메서드가 counter를 사용하지 않는다는걸 우린 알고있지만, Vue는 인식하지 못한다.

 

 

outputFullname 메서드에 console.log('Running again')를 찍어보면, 새로고침하면 'Running again'이 콘솔에 찍힌다.

그리고, counter를 변경할 때마다 console이 찍힌다. outputFullname메서드와 전혀 관계없는 counter를 변경했는데..

 

버그가 아니라, 이게 Vue가 작동하는 방식이다.

그래서 method는 동적으로 계산된 값을 출력하기 위한 최선의 해결책은 아니다.

 

 

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