[Vue] Computed vs Watch vs Method 사용법 및 비교

- 지난 시간

안녕하세요. 지난 시간에는 Vue.js 생명주기, LifeCycle에 대해 알아봤습니다.

 

혹시 놓치고 오신 분들은 아래 링크를 통해 학습하고 오시는 걸 추천드리겠습니다.

any-ting.tistory.com/42

[Vue] Component 생명주기 LifeCycle 개념 및 사용법

 

- 개요

이번 시간에는 Vue로 개발할 때 많이 사용되는 Computed와 Method 그리고 Watch에 대해 알아보겠습니다.

 

기본적인 개념을 먼저 정리해 드리겠습니다. 개념을 제대로 알고 사용해야, 올바르게 기술을 사용했다고 느끼겠죠?

 

- Computed

  Computed는 대상으로 정한 data() 속성 값이 변했을 때, 이를 감지하고 자동으로 다시 연산해주며,

  결과 값은 저장(캐싱)을 합니다.(Watch와 비슷하지만 Computed에서 중요한 부분은 결과 값을 "저장"하는 부분입니다.)

 

  Computed에는 복잡한 로직 연산이 많은 로직을 처리할 때 많이 사용됩니다.

  캐싱 처리를 하기 때문에 만약 감지하고 있던 data() 속성 값이 변경되지 않았다면 캐싱 처리하고 있던 데이터를 반환합니다.

 

- Computed vs Method

  Computed는 라이프 사이클에 영향을 받지 않습니다. template 내부에 선언된 computed 중에서 해당 함수와 연결된 

  값이 바뀔 때만 해당 Computed가 재 연산을 합니다.

 

  하지만 Methods는 라이프 사이클에 영향을 받습니다. template 내부에 선언된 methods 중에서 update 라이프사이클이

  동작한(= 아무 변수나 바뀐)다면 함수를 모두 실행합니다.

 

  Computed 사용법

  Computed는 기본적으로 Getter를 제공하며, 필요에 따라 Setter를 설정해서 사용할 수 있습니다.

 

- 기본 Getter 방식 -

<template lang="ko">
  <div>
    <div>

      <div>
        입력 값 : {{messageGetter}}
      </div>
      <input type="text" v-model="message" />

    </div>
  </div>
</template>

<script>
export default {
  name: "CommonButton",
  props: {
    name: String,
  },
  data() {
    return {
      message: "",
    };
  },
  computed: {
    messageGetter() {
      return this.message.split("").reverse().join("");
    },
  },
};
</script>

 

computed 항목에 함수를 하나 정의합니다.

기본적으로 computed는 특징에서는 return 값이 반드시 존재해야 하며, 호출 시에는 소괄호"()"를 적지 않아도 됩니다.

 

template 내부에 선언된 computed 중에서 해당 함수와 연결된 "값(message)"이 바뀔 때마다 해당 함수만을 실행합니다.

 

 

- Getter Setter 방식 -

<template lang="ko">
  <div>
    <div>

      <div>
        입력 값 : {{messageComputed}}
      </div>
      <input type="text" v-model="messageComputed" />

    </div>
  </div>
</template>

 

<script>
export default {
  name: "CommonButton",
  props: {
    name: String,
  },
  data() {
    return {
      message: "",
    };
  },
  computed: {
    messageComputed: {
      get() {
        return this.message;
      },
      set(value) {
        this.message = value.split("").reverse().join("");
      },
    },
  },
};
</script>

실행 순서를 확인하면 set()이 호출되고 그 후 get()이 호출됩니다.

template 태그를 확인하면 v-model 디렉티브에 연결한 값은 data() 속성이 아닌 computed 속성입니다.

 

setter로 값을 주입하고 해당 값을 getter로 반환해줍니다.

 

 

- Watch

  Watch은 특정 데이터의 변화를 감지하여 자동으로 특정 로직을 수행하는 속성입니다.

 

  Watch 사용법

  감시하고 싶은 data() 속성을 지정합니다.

 첫 번째 파라미터 값은 새로운 값, 두 번째 파라미터 값은 기존 값입니다. 

  

  아래는 message 속성을 감시하고 있습니다.

<template lang="ko">
  <div>
    <div>

      <div>
        입력 값 : {{message}}
      </div>
      <input type="text" v-model="message" />

    </div>
  </div>
</template>

export default {
  name: "CommonButton",
  props: {
    name: String,
  },
  data() {
    return {
      message: "",
    };
  },
  watch: {
    message(newValue, oldValue) {
      console.log("newValue : ", newValue);
      console.log("oldValue : ", oldValue);
    },
  },
};
</script>

 

- Method

  Method는 특정 기능 별로 묶을 수 있는 자바스크립트 함수를 의미합니다.

  이벤트가 발생해서 서버와 통신을 하거나 다른 함수 로직에서 호출해서 수행할 때 사용됩니다.

 

  Computed는 다른 함수 같은 영역에서 호출이 안되지만 Method는 가능합니다.

 

<template lang="ko">
  <div>
    <div>

      <div>
        입력 값 : {{message}}
      </div>
      <input type="text" v-model="message" />

      <button @click="onClick">메서드 버튼</button>

    </div>
  </div>
</template>

export default {
  name: "CommonButton",
  props: {
    name: String,
  },
  data() {
    return {
      message: "",
    };
  },
  methods: {
    onClick() {
      console.log("버튼 클릭 : ", this.message);
    },
  },
  watch: {
    message(newValue, oldValue) {
      console.log("newValue : ", newValue);
      console.log("oldValue : ", oldValue);

      this.onClick();
    },
  },
};
</script>

 

이번 시간에는 Vue에서 많이 사용되는 Computed와 Watch 그리고 Method에 대해 알아봤습니다.

 

감사합니다. :)