-
1. Vue의 기본속성 이해 (data, computed, watch)Vue For Beginner 2019. 9. 29. 21:20
기본속성의 이해
- 웹개발을 처음 시작하는 사람들을 위해 작성되었습니다.
- data, computed watch 속성을 쉽고 빠르게 이해할 수 있습니다.
data 바인딩 (템플릿)
vue는 HTML과 유사한 템플릿에 선언된 데이터를 보여주는 방식으로 개발이 이루어집니다. 즉 데이터의 변화에 따라 화면에 보여지는 내용이 갱신되는 반응형 시스템이고 이러한 구조를 MVVM이라고 볼 수 있습니다. vue는 내부적으로 템플릿을 가상 DOM으로 컴파일 하여 최소한의 DOM조적으로 이러한 과정이 진행될 수 있도록 설계되어있습니다.
작동원리를 이해하는 것은 매우 복잡하지만 사용하는 방법은 매우 단순하고 쉽습니다. 템플릿에서
{{ }}이중중괄호로 선언된 데이터를 바인딩 하는 형태입니다. 이를Interpolations이라고 부릅니다. 아래의 예제는 카운터함수를 구현한 간단한 코드로 {{count}} 에서 count데이터를 바인딩하는 구조로 되어있습니다. 버튼을 클릭하게 되면 data가 변경되면서 화면에 표기되는 숫자가 갱신되게 됩니다. 참고로{{ }}안에는 javascript의 식이 들어갈 수 있습니다.<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Counter</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> </head> <body> <div id="app"> <div>{{count}}</div> <button @click="minus()">-</button> <button @click="plus()">+</button> </div> <script> var app = new Vue({ el: '#app', data: { count: 1 }, methods: { plus() { this.count += 1 }, minus() { this.count -= 1 } } }) </script> </body> </html>참고로 컴퍼넌트의 형태로 개발을 하는 경우 data속성은 함수로 표현되어야 합니다.
data: function () { return data } //es6 data: () => { }computed
computed는 계산된 속성이라고 부르는데 data를 가공해서 보여줘야하는 경우 사용됩니다. 예를들어 10이상일 경우 경고라는 문구를 같이 보여주고자 한다고 가정해 봅시다. 가장 간단한 방법으로는 위에서 배운
Interpolations에 아래와 같이 자바스크립트 식을 첨부하는 것입니다.<div>{{count < 10 ? count : `${count} 경고!!!!`}}</div>위와 같이 단순한 식이 온다면 문제가 없지만 복잡해지는 경우라면 템플릿이 지저분해지는 문제가 생깁니다. 그래서 이러한 처리를 하기 위해 computed 속성을 이용하게 됩니다. 아래와 같이 스크립트 부분에 computed 속성을 추가해 주는 것입니다.
<script> computed: { showCount() { return this.count < 10 ? this.count : `${this.count} 경고!!!!` } }, </script>만약 10이상일 때 경고, 20이상일 때 위험 등 다양한 조건이 추가된다면 computed속성을 이용하는 것이 좋습니다. 실제로 computed는 단위를 변환하거나 또는 라우터의 정보를 가지고 데이터를 가공해서 보여줄 때 사용할 수 있습니다. 또한 데이터가 배열이고 이 배열을 필터링 하는경우 computed속성에서 처리합니다. method와 같은 함수를 만들어 처리할 수 있지만 computed는 종속대상에 따라 캐싱되어 해당 속성이 변경될때에만 실행되기 때문에 특별한 경우가 아니라면 computed속성을 활용하는 것이 좋습니다.
watch
watch는 데이터를 감시하는 패턴입니다. 예를들어 data가 20이상이 되면 경고창을 띄우고자 할 때 watch속성을 활용할 수 있습니다. watch는 함수의 이름에 데이터를 정의하고 매개변수로 기존값과 변경되기 전의 값을 받습니다.
<script> watch: { count (val, oldVal) { if (val > 20) { alert('위험합니다!!')} } } </script>하지만 computed속성도 데이터의 변화에 따라 실행되기 때문입니다. 즉 아래와 같이 computed속성에서 처리할 수 있습니다.
<script> computed: { showCount() { if (this.count > 20) { alert('중단하세요~')} return this.count < 10 ? this.count : `${this.count} 경고!!!!` } }, </script>기능상 유사하지만 vue 문서에는 watch속성은 감시할 데이터를 지정하고 데이터가 바뀔때 함수를 실행하는 명령형 프로그래밍 방식이고 computed는 계산대상을 정의하는 방식인 선언형 프로그래밍 방식이라고 설명하고 있습니다. 실제로 vue에서 whatch속성은 자주 사용되지는 않습니다. 비동기데이터를 처리하는 과정에 computed속성으로 해결이 안되는 경우에 사용하고 과거데이터와 수정된 값을 비교해야하는 경우 등 꼭 필요한 경우가 아니라면 일반적인 상황에서는 사용되지 않습니다. 정리하면 whatch속성은 잘 사용되지는 않지만 이해하고 있다면 복잡한 어플리케이션을 만들때 아주 유용하게 사용될 수 있습니다.
'Vue For Beginner' 카테고리의 다른 글
6. 폼(form) 다루기 (v-model) (0) 2019.10.03 5. 컴퍼넌트와 데이터 전달 (component, props, $emit) (0) 2019.10.01 4. 컴퍼넌트의 이해와 vue-cli으로 프로젝트 생성 (0) 2019.09.29 3. 이벤트 핸들링 (0) 2019.09.29 2. 리스트랜더링과 조건부랜더링 (0) 2019.09.29 댓글