티스토리 뷰

우리가 Nuxt.js를 공부하려다 보니까 Vue.js의 속성들에 대해서 모르는 내용이 많다는 사실을 깨달았다. 그래서 앞으로 진도를 진행할 때마다 내가 미리 예습을 하면서 걸림돌이 될 거라고 예상이 되는 부분은 이번처럼 [번외] 편을 만들어서 하나씩 짚고 가려 한다.

오늘은 computed에 대한 이야기다.

computed는 말 그대로 "계산된" 이라는 의미로 사용된다. 일단 아래의 코드를 잠시 살펴보자.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>1. Vue Installation</title>
    <script type="text/javascript" src="https://unpkg.com/vue@2.6.8/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>
            <strong>카운트 :</strong>
            <span>{{count}}</span>
        </p>
        <p>
            <strong>배율 적용 카운트 :</strong>
            <span>{{calcCounter}}</span>
        </p>
        <button v-on:click="onBtnClick">클릭</button>
    </div>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app'
        , data: {
            count: 0
            , rates: 1.5
        }, computed: {
            calcCounter: function(){
                return this.count * this.rates;
            }
        }, methods: {
            onBtnClick: function(){
                app.count++;
            }
        }
    });
    </script>
</body>
</html>

일단 computed 속성의 내부 값들은 함수를 담고 있게 되고 그 함수는 특정 값을 반환해야 하는데 이번 경우엔 data의 count와 rates를 서로 곱한 값을 내보내는 역할을 하는 calcCounter라는 함수를 만들었다.

여기서 주의할 점은 computed 속성의 경우 인스턴스를 생성하는 시점에 이미 화면에 랜더링을 진행한다. 이 이야기는 곧 app객체에 인스턴스화 된 Vue객체를 할당하기 전에 computed 안의 함수들이 실행하게 된다는 소리다. 그러므로 computed 안에서는 인스턴스화 된 Vue를 할당받는 변수인 "app"에 접근해도 undefined가 나올 뿐이라는 사실이다. 그래서 app.count로 접근하지 않고 현재 인스턴스화 된 "this"에 접근하여 코드를 작성해야 한다.

 

위의 코드를 작성한 뒤에 화면을 확인해보자.

computed 함수가 실행되는 화면

위의 이미지를 확인하면 버튼을 클릭하면 실행되는 onBtnClick 메서드가 실행되면서 count 값이 1씩 증가하는 것을 확인할 수 있다. count값이 증가하게 되면 computed에 정의한 calcCounter 함수에 의해 count 값과 rates 값이 곱해져 화면에 반영되는 것을 확인할 수 있다.

 

computed 의 특성상 인스턴스화 된 "this"로 접근해 값을 제어해야하는 것이라 변수의 포커싱에 문제가 발생하기 좋은 코드가 된다. 이런 경우 아래와 같이 코딩하는 버릇을 키우는 것을 추천한다.

 

<script type="text/javascript">
    var app = new Vue({
        el: '#app'
        , data: {
            count: 0
            , rates: 1.5
        }, computed: {
            calcCounter: function(){             
                var self = this;
                
                function calc() {
                    return self.count * self.rates;
                }

                return calc();
            }
        }, methods: {
            onBtnClick: function(){
                app.count++;
            }
        }
    });
</script>

이렇게 하면 Vue 인스턴스를 self라는 변수에 저장하여 사용함으로써 함수 안에 있는 함수 블럭에서 "this"를 사용하지 않도록 만들어주는 것이 좋다.

 

computed는 이걸로 대충 끝내고

다음시간에는 Vuex의 Store 객체에 대해서 배워보도록 하자.

 

안녕!

댓글
댓글쓰기 폼