[Vue-23]computed, 그리고 methods와의 차이(feat.watch)

JavaScript와 HTML, CSS등에 대해서는 일체 다루지 않는다.

기초지식은 다른 강의를 참조하도록 하라.

참고:

[Package]Bower(Front End Pacakage 관리) 설치

[Package]Vue.js

vue의 methods에 대해서 이 포스팅에서 논한적이 있다.

그래서 여러분들이 만약 특정 값이 들어오고 그 값을 이용해서 다른값을 내야한다면 이 때까지 배운 개념으론 2가지가 있다.

1. watch를 사용해서 값을 변동시킨다.

2. methods를 사용해서 return시킨다.

watch는 이 포스팅에서 논했었다.

하지만 두 가지 방법 모두 단점이 있다.

첫번째 방식인 watch는 너무 코드를 스파게티로 만든다.

확실히 사용하다보면 선언형프로그래밍 관점으로는 뭔가 맞지 않는다.

두번째 방식은 이제 아래에 설명할 것인데 computed와 비교해서 설명하도록 하겠다.

computed

그래서 등장한게 바로 computed이다.

사실 여러분은 아직 methods의 단점을 모르므로 큰 차이점을 못 느낄 수 있으나 앞으로 차차 설명하도록 하자.

먼저 아래 코드를 보도록 하자.

<!--Sub.vue-->
<template>
    <div class="sub">
        methods - count: {{methodsCount()}}<br>
        <input type="button" value="증가" @click="countMethods++">
        <input type="button" value="감소" @click="countMethods--"><br>
        computed - count: {{computedCount}}<br>
        <input type="button" value="증가" @click="countComputed++">
        <input type="button" value="감소" @click="countComputed--">
    </div>
</template>

<script>

    export default {
        name: 'Sub',
        props: {},
        watch: {},
        computed: {
            computedCount(){
                console.log('computed');
                return this.countComputed;
            }
        },
        data() {
            return {
                countMethods: 0,
                countComputed: 0,
            }
        },
        created: function () {
        },
        methods: {
            methodsCount(){
                console.log('methods');
                return this.countMethods;
            }
        },
    }
</script>

<style scoped>
    .person {
        padding: 10px;
        background-color: skyblue;
    }
</style>

이제 methods말고 computed라는 탭이 추가되었다.

여러분은 computed가 methods가 하는 일이 완전 동일하다고 생각하면된다.

computed: {
    computedCount(){
        console.log('computed');
        return this.countComputed;
    }
},

computed - count: {{computedCount}}<br>

computed와 methods의 차이점이라면 몇가지 있다.

computed와 methods와의 차이점

1. template에서 호출시 ()를 적지 않아야 된다.

2. return 값이 반드시 존재해야한다.

3, 파라메터를 받을 수 없다.

저 차이점만 보면 computed는 영락없이 methods의 하위호환이다.

아 장점 하나 있다면 뭔가 거슬리는 ()가 없다는 점이다. 이것도 큰 장점이지.

하지만 일반적인 상황에서는 computed가 권장된다.

그 이유는 computed가 명령형 관점보다 선언형 관점으로 보기 더 좋다는 이유도 있지만

성능적인 문제가 있기 때문이다. 위 예제를 실행해보자.

위의 움짤을 보면 알겠지만 놀라운 사실을 알 수 있다.

computed와 methods의 근본적인 동작원리와도 연결되어 있다.

computed - template내부에 선언된 computed중에서 해당 함수와 연결된 값이 바뀔 때만 해당 함수만을 실행한다.

methods -그런거 모르겠고  template내부에 선언된 methods중에서 update라이프사이클이 동작한(=아무 변수나 바뀐)다면 함수를 모두 실행한다.

여러분은 이걸 보고 놀랄것이다.

method와 computed에 사용하는 변수는 서로 다르다. method count의 값이 바뀔경우 computed는 실행되지 않는다.

하지만 반대의 경우에는 computed count만 바뀌었는데도 methods가 실행되는 어처구니 없는 상황을 발견할 수 있다.

아무생각없이 methods를 써왔다면 더 놀랄것이데 사실 template구문에 methods가 많을 수록 아주큰 성능 하락을 불러온다는 것이다.

그래서 여러분은 template내부에 쓴다면 computed를 쓰는게 무조건 성능상으로 유리하다는걸 알 수 있다.

computed vs methods vs watch

셋은 공통점이 있고 실제로도 비슷한 역활로 사용한걸 필자는 본적(도 있고 경험한적)도 있다.

하지만 결과적으로 "값을 이용해서 뭔가 계산해서 내보내는 단순작업"에서는 computed가 무조건 적으로 낫다는 생각에 도달하게 되었다.

그 이유를 아래에 설명하겠다.

computed vs watch

computed와 watch는 둘다 옵저버 패턴으로 동작하며 특정 값이 변동되는걸 감지해서 변동시키는 아주 유용한 녀석이다.

그래서 비슷한 상황에서 사용되는 경향이 있지만 필자 생각에는 용도를 구분하는게 좋다는 생각이다.

computed - 특정 값을 계산해서 보여준다.

watch - 특정 값의 변동해서 다른 작업을 한다.

하지만 실제로 현업에서 watch를 아예 안써도 작업을 할 수 있다.

다만 조건이 좀 필요한데 watch를 쓰는 곳도 있다. 다만 적게쓰는 분위기인건 확실하다.

실제로 watch를 사용하게되면 고려해야할게 늘어난다.

나중에 시간이 지나면 watch의 해로움이라는 밈이 등장할지도 모르겠다.

computed vs methods

위에서 실컷 설명을 했지만 서로 용도가 다르다.

tempalate내부에서 써야한다면 computed, 아니면 methods라는 공식이 성립가능하지만 실제로는 다른 상황에서 어쩔수 없이 methods를 써야할 경우가 있다.

1. 파라메터를 받아서 호출해야할 때 - data를 사용하지 않는다는 정책을 취한다면 computed로는 아예 불가능하다.

2. 함수 안에서 다른 값을 바꿔줘야할 때 - computed에서는 다른 값을 바꾸는건 정책위반이다. (불가능한건 아니다.) 이 경우 methods를 사용한다.

앞으로도 여러분은 computed를 많이 사용하게 될건데 watch와 methods를 같이 잘 사용하는게 좋을 것이다.