1. Getter란 무엇인가?
- Getter란 값을 얻어내는 방식을 의미한다.
- Getter는 값을 변경할 수 없으며 오직 값을 읽는 것만 가능하다. (Read Only)
- 이전 포스팅에서 배웠던 computed 또한 Getter의 하나이다.
- 다음 예제를 통해서 Getter의 의미를 알아보자.
a) computed는 왜 Getter 일까?
<template>
<button @click="add">
ADD
</button>
<h1>{{ computedMessage }}</h1>
<h1>{{ computedMessage }}</h1>
<h1>{{ computedMessage }}</h1>
<h1>{{ computedMessage }}</h1>
</template>
<script>
export default {
data() {
return {
msg: "Hello Computed!"
}
},
computed: {
// Getter
computedMessage() {
return this.msg.split('').reverse().join('')
}
},
methods: {
add() {
this.computedMessage += '!?'
}
}
}
</script>
<style>
h1{
font-size: 50px;
}
</style>
- 해당 코드는 이전 포스팅에서 이어지는 프로젝트의 App.vue에 작성된 내용이다.
- 버튼을 누르면 add 메소드가 동작하여 computedMessage의 내용에 문자열 '!?'을 추가하여 출력하도록 한다.
출력 화면
- 아무리 버튼을 눌러도, computedMessage의 내용에는 문자열이 추가되지 않는다.
- 여기서 computed 속성이 왜 Getter인지를 알 수 있는데, 그 이유는 값을 읽어올 수는 있어도 변경할 수는 없기 때문이다.
- 값을 변경할 수 있는 것은 Setter라고 부른다.
2. Setter란 무엇인가?
- Setter는 Getter와 반대로, 값을 변경 또는 지정하는 기능이다.
- 다음 예시를 통해서 Setter에 대해서 알아보자.
a) Setter 예시
<template>
<button @click="add">
ADD
</button>
<h1>{{ computedMessage }}</h1>
<h1>{{ computedMessage }}</h1>
<h1>{{ computedMessage }}</h1>
<h1>{{ computedMessage }}</h1>
</template>
<script>
export default {
data() {
return {
// Getter, Setter 모두 가능
msg: "Hello Computed!"
}
},
computed: {
// Getter
computedMessage() {
return this.msg.split('').reverse().join('')
}
},
methods: {
add() {
//this.computedMessage += '!?' // <= Getter
this.msg += '!?' // <= Setter
}
}
}
</script>
<style>
h1{
font-size: 50px;
}
</style>
출력 화면
- 위의 Getter 예시와는 다르게 add() 메소드에 this.msg 라는 코드를 이용하여 문자열 '!? 을 추가하였다.
- 이렇게 기존의 데이터 값을 변경하거나 새롭게 설정할 수 있는 기능을 Setter라고 한다.
3. computed에 Getter와 Setter 기능 만들기
<template>
<button @click="add">
ADD
</button>
<h1>{{ computedMessage }}</h1>
<h1>{{ computedMessage }}</h1>
<h1>{{ computedMessage }}</h1>
<h1>{{ computedMessage }}</h1>
</template>
<script>
export default {
data() {
return {
// Getter, Setter
msg: "Hello Computed!"
}
},
computed: {
computedMessage: {
// 메소드 형식이 아닌 객체 형식으로 등록한다.
// 왜? getter와 setter를 내부에 정의해야 하기 때문이다.
get() { // getter 역할
return this.msg.split('').reverse().join('')
},
set(newValue) { // setter 역할, 매개변수를 받아서 값 재설정
this.msg = newValue
}
}
},
methods: {
add() {
this.computedMessage += '?!'
// 기존 값에 추가되는 문자열(= '?!')이 setter의 매개변수(= newValue)에 들어감
// ex) computedMessage += '?!' 이 값이 newValue로 넘어가는 것
}
}
}
</script>
<style>
h1{
font-size: 50px;
}
</style>
출력 화면
- 위의 코드처럼, get()과 set()을 만들어서 getter와 setter의 역할을 각각 수행하도록 작성할 수 있다.
- setter에 꼭 값을 할당하는 것 뿐만 아니라 아래의 사진처럼, 화면에는 영향없이 콘솔을 통해 값을 확인할 수 있다.
댓글