[Vue] Computed Properties의 Getter, Setter 사용방법

 

안녕하세요. 혀코입니다.

 

이번 시간에는 Vue의 Getter와 Setter에 대해서 알아보겠습니다.

 

 

지난 시간에 배운 Vue의 computed property는 cashing 기능이 있어서 읽기 전용인 상수의 특성을 띈다고 했습니다.

 

이때 Getter와 Setter를 사용해서 이 computed property의 함수의 결과값을 바꿀 수 있습니다.

 

App.vue

 

<template>
  <h1>Reverse Message</h1>
  <p>{{ message }}</p>
  <p>{{ reversedMessage }}</p>
  <button @click="add">Add</button>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World'
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    add() {
      return this.message += '!'
    }
  }
}
</script>

 

위 코드를 실행하면, 제공된 문자열과 뒤집어진 문자열이 있고, Add 버튼을 누르면 제공된 문자열의 마지막에 느낌표가 추가되고 이 느낌표가 추가된 문자열을 뒤집어 뒤집어진 문자열을 출력하고 있습니다. 

여기서 methods property의 add 함수를 this.reversedMessage += '!'로 변경하면, computed property는 상수의 특성이 있기 때문에 변경되지 않는 것을 확인할 수 있습니다. 

 

이 것을 변경하려면 다음과 같이 코드를 작성해야 합니다.

 

<template>
  <h1>Reverse Message</h1>
  <p>{{ message }}</p>
  <p>{{ reversedMessage }}</p>
  <button @click="add">Add</button>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World'
    }
  },
  computed: {
    reversedMessage: {
      get() {
        return this.message.split('').reverse('').join('')
      },

      set(value) {
        console.log(this.message = value)
      }
    }
  },
  methods: {
    add() {
      return this.reversedMessage += '!'
    }
  }
}
</script>

 

 Add 버튼을 클릭하면, computed property의 함수 reversedMessage의 set(value) 함수가 작동되며, 뒤집어진 문자열에 느낌표가 추가된 문자열을 최초에 제공된 문자열의 변수인 message의 값으로 변경합니다. 그리고 이 문자열을 받아 reversedMessage 함수의 get 함수가 실행되어 다시 문자열을 뒤집어 출력하게 됩니다.

 

 

이렇게 Vue의 computed property의 getter와 setter를 사용하는 방법에 대해서 알아봤습니다.

 

해당 정보가 도움이 되셨다면, 공감과 구독 부탁 드립니다.

 

감사합니다. :)