[Vue.js] 이벤트 및 methods, Computed, Watch

Method, Computed, Watch의 차이점

1. Methods 메서드

메서드는 템플릿에서 데이터를 바인딩할 때 쓸수 있다. 이때 바인딩(binding)이란 식별자와 값을 연결하는 과정을 의미한다.  템플릿에서 사용해야 하는 데이터를 가져오기 위해서도 메서드를 쓴다. 데이터 바인딩을 위해 메서드를 쓰는 경우 메서드는 컴포넌트의 리렌더링 주기에 맞춰 매번 실행될 것이다. 변동사항이 생기면 템플릿을 재평가하고 해당 템플릿에 호출된 메서드를 다시 호출한다. 그러므로 이벤트 바인딩에는 메서드를 주로 사용해야 한다. 데이터 바인딩의 경우에는 중괄호와 함께 사용한다. 이는 페이지에 변동사항이 있을때마다 메서드가 실행한다.

    <header>
      <h1>Vue Events</h1>
    </header>
    <section id="events">
      <h2>Events in Action</h2>
      <button v-on:click="add()">Add</button>
      <button v-on:click="reduce()">Remove</button>
      <p>Result: {{ counter }}</p>
    </section>

const app = Vue.createApp({
  data() {
    // 이때 data는 임의로 함수명을 변경할 수 없다. 무조건 data라고 써야함
    return {
      counter: 0,
    };
  },
  methods: {	// 메서드도 무조건 메서드라고 적어야함
    add() {
      this.counter = this.counter + 1;
    },
    reduce() {
      this.counter = this.counter - 1;
    },
  },
});

app.mount("#events");

여기서 전역적으로 생성된 add()는 HTML 코드에 사용할 수 없다. HTML을 Vue로 제어하기 위해서는 Vue 앱에 정의된 것 뿐이다. 그러므로 Vue앱에 Method를 사용하여 정의해 준다.  

단순히 메서드를 괄호가 바인딩에 넣어서 출력할 값을 동적으로 얻을 수 있을 뿐 아니라 이벤트 리스너와 함께 사용해서 이벤트가 발생할 때 실행될 코드를 정의할 수도 있다. 

2. Computed 

연산프로퍼티는 데이터 바인딩에만 쓰인다. 이벤트 바인딩에는 연산 프로퍼티가 쓰이지 않는다. 연산 프로퍼티는 다른 데이터를 기반으로 하는 데이터를 가져오기에 유용하다며 의존 데이터가 바뀔때만 재 실행되어 과도한 렌더링을 줄인다는 장점이 있다. ex)연산 프로퍼티에 사용된 데이터가 바뀌는 경우 사용하지 않는 다른 데이터가 바뀔때는 연산 프로퍼티를 재평가 x

  computed: {
    fullname() {
      console.log("Running Again --- ");
      if (this.name === "" || this.lastName === "") {
        return "";
      }
      return this.name + " " + this.lastName;
    },
  },

3. Watch

watch는 템플릿에 직접 사용하지 않는다. 템플릿 내부에서 참조하지는 않지만 데이터 변경에 대한 반응을 코드로 실행할 수 있다. 예를 들어 HTTP요청을 보내거나 타이머를 설정, 로컬 스토리지에 데이터를 저장하는 작업 등이 있다. 주로 데이터가 아닌 업데이트에 Watch를 사용하며 바뀌는 데이터를 토대로 데이터 자체가 아닌 내부에서 업데이트 하는 작업이 있을 경우 사용한다.

const app = Vue.createApp({
  data() {
    // 이때 data는 임의로 함수명을 변경할 수 없다. 무조건 data라고 써야함
    return {
      counter: 0,
      name: "",
      lastName: "",
      fullname: "",
    };
  },
  watch: {
    counter(value) {
      if (value > 50) {
        const that = this;
        setTimeout(function () {
          that.counter = 0;
        }, 2000);	// 50 초과값에 도달하면 2초마다 리셋됨, 데이터 자체가 아닌 이벤트에 집중
      }
    },
  }
});