[Vue] mixin, filter 기능 사용

2019-12 에 작성된 글입니다.

1. mixin 사용

믹스인 - Vue.js
Mixins는 Vue 컴포넌트에 재사용 가능한 기능을 배포하는 유연한 방법입니다. mixin 객체는 모든 구성 요소 옵션을 포함할 수 있습니다. 컴포넌트에 mixin을 사용하면 해당 mixin의 모든 옵션이…kr.vuejs.org

컴포넌트에 mixin의 함수를 사용하면, 해당 mixin 함수가 컴포넌트에 혼합됩니다.

이게 그렇게 좋은 건지 모르겠는데? 라고 생각되시는 분들이 계실 겁니다. 그러나, 믹스인은 함수 뿐만이 아닌, data 등과 같은 옵션들과 훅들도 같이 혼합하여 사용할 수 있습니다. 긴말 않고 시작하겠습니다.

먼저 mixins 폴더를 components 폴더에 생성한 다음, 그 안에 믹스인 객체를 만들 js 파일을 생성해 주세요.

생성이 되었다면, 그 안에 아래 내용을 넣겠습니다.

export const count = {
    data() {
        return {
            score_left: 0,
            score_right: 0
        }
    },
    methods: {
        format(j, i) {
            i = "0" + i;
            i = i.slice("-2");
            if (j == 1) {
                this.score_left = i;
            } else if (j == 2) {
                this.score_right = i;
            }
        },
        score_count(j, i) {
            i++;
            i = this.format(j, i);
            return i;
        }
    },
    created() {
        this.format(1, this.score_left);
        this.format(2, this.score_right);
    }
}

내용을 보고 놀라셨을 겁니다. 믹스인에서는 함수 뿐만이 아니라, 여러 요소들을 사용할 수 있습니다. 위의 vue.js 공식 홈페이지에서 설명한 것이 바로 이것입니다. 믹스인의 모든 옵션은, 컴포넌트의 고유 옵션에 혼합됩니다.

이제 이것을 컴포넌트에서 추가해야 하겠죠? script 부분에 아래 내용을 추가하겠습니다.

<script>
import { count } from "../components/mixins/count";
export default {
  mixins: [count]
}
</script>

// 추가할 뷰 컴포넌트의 스크립트 부분

“이게 다인가요?” 네, 이게 다입니다. 많은 기능들을 하게 해 주는 데에 비해서 정말 간단하죠?

그리고, 해당 컴포넌트의 templete에서 믹스인에 만들어 준 함수를 호출하겠습니다.

<div class="segment_front" v-on:click="score_count(1, score_left)">{{score_left}}</div>

실행을 시켜보면, 정상적으로 반응하는 것을 보실 수 있을 겁니다.

사실 vue.js에서 캡슐화를 하는 방법은 믹스인 말고도 플러그인 등 많은 방법이 있습니다. 상황에 따라서 적합하게 사용하면 좋을 것 같습니다.

또한, 믹스인 역시 전역으로 사용할 수 있습니다. 그러나, 이는 프로젝트의 모든 vue 인스턴스에 영향을 끼치기 때문에 사용하실 때 주의하셔야 합니다.

 

2. filter 사용

캡슐화는 하였으나, 두 자리의 숫자로 포맷하기 위해서 조건을 나누고 created에서 필터링을 한 것이 조금 아쉬웠습니다.

방법을 찾던 중, vue.js의 filter 라는 기능을 찾게 되었습니다.

필터 - Vue.js
Vue는 텍스트 형식화를 적용할 수 있는 필터를 지원합니다. 이 필터들은 중괄호 보간법 혹은 v-bind표현법 을 이용할 때 사용가능합니다. ( v-bind 표현법에서는 2.1.0+ 부터 사용 가능합니다.) 필터는…kr.vuejs.org

이 기능은 이름 그대로 필터링을 해 주는 기능입니다. 긴말 않고 시작하겠습니다.

포맷 기능 역시 캡슐화를 해 줄 것이기 때문에, components/mixins/formatNumber.js 라는 파일을 만들어 줍니다.

그리고 아래와 같은 내용을 넣어 주겠습니다.

export const formatNumber = {
    filters: {
        format(i) {
            i = "0" + i;
            i = i.slice("-2");
            return i
        }
    }
}

컴포넌트의 스크립트에 방금 추가한 믹스인을 넣어 주고,

import { count } from "../components/mixins/count";
import { formatNumber } from "../components/mixins/formatNumber";

export default {
  mixins: [count, formatNumber],
};

그리고 아까의 내용에서 |와 format 만 추가해 줍니다.

<div class="segment_front" v-on:click="score_count(2, score_right)">{{score_left | format}}</div>

이게 다입니다! 굉장히 간단하죠?