[Vue-15]mixin 만들고 사용해보자.(기능만 재사용가능하게 하는 방법)

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

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

참고:

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

[Package]Vue.js

https://vuex.vuejs.org/kr/

http://vuejs.kr/update/2017/01/08/using-vue-with-vuex-vue-rotuer/

여러분이 코딩을 하다보면 기능은 비슷한데 다른 컴포넌트를 만들어야할 때가 있다.

이 때 우리가 사용하는 방식은 크게 두가지가 있다.

1. 그냥 컴포넌트를 두개 만든다.

2. 한개 만들고 props에 데이터를 때려밖는다.

문제는 둘다 엘레강스하지 못하다는 것이다.(참고로 엘레강스는 우아하다는 뜻이다.)

둘다 문제점을 가지고 있으며 그 문제점은 어찌보면 치명...적인건 아닌데 프로그래머의 내면에 있는 깔끔함의 욕구 때문에 괴롭게 된다.

1번의 경우에는 심플하다. 그런데 우리는 오래되진 않았지만 짧은 경험을 통해서도 알 수 있듯이

비슷한녀석들의 기능은 보통 비슷하게 함께 바꿔야한다는걸 체감하게된다. 오히려 바뀌지 않는 것이 예외상황일 정도로.

이 경우 유지보수성에서 매우 손해를 보게 된다.

그래서 2번의 경우를 만들게 된다.

props로 바뀔수 있는 모든 값을 변수로 바꾸면 되고 꽤깔끔하게 된것 같지만 문제가 있다.

첫번째로 코드가 너무 길어지게된다. props에 여러 데이터가 들어간다는 것은 코드에 파라메터가 만리장성 마냥 길어진다는 것이다.

한눈에 보기힘든 코드가 되는것 역시 자명한데 또 다른 문제는 마크업 관점에서 좋지는 않다는 것이다.

아예 다른 컴포넌트라면 클래스명이냐 컴포넌트 네임이 달라서 한번에 구별이 된다.

그런데 같다면 그걸 내용을 까보기 전까지는 알기 힘들다는 것이다.

선언형 프로그래밍인 vue에서 마크업이 직관적이지 못하다는점은 꽤나 큰 단점으로 다가오게된다.

다행히도 vue개발자는 진성 프타쿠였는지 이를 해결하기위해서 mixin이라는것을 만들어 놨다.

mixin은 기능의 부분으로 js문법을 통해서 만들었다.

말 그대로 vue의 일부 기능들을 모아둔 것이다.

java나 c++의 abstract class와 꽤나 유사하다고 생각하면 편리할 것이다.

즉 이는 일반적으로 혼자만으로는 아무것도 할 수 없고 다른 컴포넌트에게 mixin되서 사용한다.

사용하는 모양새는 영락없는 상속과 비슷하다. 그래서 그냥 "상속"이라고 봐도 무방할 정도다.

대신에 js, 즉 script만 상속이 가능하다고 보면된다.

그럼 예제를 보도록 하자.

해당 예제는 위의 구조로 되어 있다.

먼저 App.vue의 예시를 보도록하자.

<template>
<!--App.vue-->
    <div id="app">
        <div id="sub" @click="onClick" @contextmenu.prevent="onRightClick">{{data}}</div>
    </div>
</template>

<script>
    import myMixin from './components/mixin/myMixin'

    export default {
        mixins: [myMixin],
        name: 'app',
        components: {},
        created(){
            console.log('component');
            console.log(this.data)
        },
        data: function () {
            return {
                data: 10 + this.weight,
            }
        },
        methods: {
            onRightClick(){
                this.data--;
            }
        }
    }
</script>

<style>
    #app{
        display: table;
    }
    #sub {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        width: 100px;
        height: 100px;
        background-color: skyblue;
    }
</style>

App.vue는 화면에 숫자를 표시하는 예제이다.

단 좌클릭시 숫자를 더해주고 우클릭시 숫자를 빼줄것이다.

디버깅을 위해서 생성 즉시 console.log를 실행할 것이다.

그런데 코드를 보면 조금 의아한 부분들이 있다.

this.weight, this.onClick이라는 변수들은 애당초 존재치 않다.

도대체 어디 있는 것일까라고 생각한 순간 위에 낯선 코드가 눈에 들어온다.

mixins: [myMixin],

이 코드로 인해서 myMixin이라는 코드가 app과 합쳐진다.

// myMixin.js
let myMixin = {
    props: {
        weight:{
            default: 10
        }
    },
    created() {
        console.log('mixin')
    },
    methods:{
        onClick(){
            this.data++;
        }
    }
};
export default myMixin;

코드의 생김새는 위와 같다. 구조는 일반 vue 스크립트와 동일하다.

정말 동일하게 써주면된다.

그러면 해당 라이프사이클 끼리 합쳐지게된다.

가령 위의 경우 mixin의 created는 app의 created와 합쳐져서 같이 실행되게 된다.

실행순서는 mixin들이 먼저 실행된다. 그 다음 원래 컴포넌트의 라이프사이클이 실행되게 된다.

위의 코드들이 합쳐져서 하나의 컴포넌트로 탄생하게 된다.

그럼 예제를 실행해보도록 하자.

이렇게 유용하게 사용할 수 있는 mixin을 잘 사용해 주는 것이 좋다.

전역으로도 사용할 수 있지만 권장사항도 아니므로 여기서는 논하지 않도록 하겠다.