[Vue] 믹스인(Mixin) 사용방법

- 개요

안녕하세요. 이번 시간에는 Mixin에 대해 알아보겠습니다.

 

우리는 프로그램을 만들다 보면 공통적인 기능들이 많이 있습니다.

 

예를 들어 첫 페이지에 특정 애니메이션 기능이 있고 두 번째 페이지에도 동일한 애니메이션 기능이 있다고 하면, 우리는 이 기능을 모듈화를 하고 싶다는 생각이 듭니다.

 

모듈이란 무엇일까요? 사전에서 소개하는 단어 뜻은 아래와 같습니다.

 

 

여러 뜻이 있지만, 우리는 규격화된 부품이라는 단어를 잘 이해야 합니다. (IT 용어는 참 어려워요... ㅠㅠ)

 

규격은 기능을 만들어 놓을 수 있는 "틀"이라고 할 수 있으며, 그 규격 안에 기능을 정리해 놓은 걸 하나의 부품이라고 할 수 있습니다.

 

그러면 Vue 인스턴스들은 해당 부품을 찾아서 사용하면 됩니다. 재활용이 가능하며 관리면에서도 좋겠죠 :)

 

Vue에서는 모듈화는 Mixin을 통해 만들고 사용할 수 있습니다.

 

  - 사용법

Mixin은 사용방법은 어렵지 않습니다. 상속이라는 개념을 알고 있다면 "아~!"하고 이해하실 수 있습니다.

 

Mixin 파일 생성

//Hello.js
const Hello = {
    data() {
        return {
            message: "개발이 취미인 사람",
        };
    },
    methods: {
        Hi() {
            this.message = "안녕하세요!";
        }
    },
};

export default Hello;

 

Hello라는 Mixin 파일을 생성했습니다. vue 확장자가 아닌. js 파일로 만들었습니다. (둘 다 사용할 수 있습니다.)

 

연결

<template lang="ko">
  <div>
    메인 컴포넌트
    <div>
      <div>{{message}}</div>
      <button @click="Hi">인사 버튼</button>
    </div>

    <div>
      <router-view />
    </div>
  </div>
</template>

<script>
import Hello from "@/mixins/Hello";

export default {
  name: "Main",
  mixins: [Hello],
  data() {
    return {};
  },
  methods: {
  },
};
</script>

mixins: [생성한 믹스인 선언 ] (mixins 항목에 배열 형태로 연결 "여러 믹스인을 연결할 수 있습니다")

 

 

결과 화면

 

- 주의사항

Mixin에서 선언한 변수와 기능(메서드, 라이프 사이클 "기능 모든 것")은 Vue 인스턴스에서 선언한 변수와, 기능(메서드, 라이프 사이클 "기능 모든 것")에  "이름"이 동일하면 Vue에서는 Mixin에 선언을 무시하고 Vue 인스턴스에 선언된 코드를 사용합니다.

 

Hello.js 파일

const Hello = {
    data() {
        return {
            name: "믹스인 Ryan",
            message: "개발이 취미인 사람",
        };
    },
    methods: {
        Hi() {
            this.message = "안녕하세요!";
            console.log("Hello Mixin 클릭 이벤트");
        }
    },
};

export default Hello;

 

Main.vue 파일

<template lang="ko">
  <div>
    메인 컴포넌트
    <div>
      <div>{{name}}</div>
      <div>{{message}}</div>
      <button @click="Hi">인사 버튼</button>
    </div>

    <div>
      <router-view />
    </div>
  </div>
</template>

<script>
import Hello from "@/mixins/Hello";

export default {
  name: "Main",
  mixins: [Hello],
  data() {
    return {
      name: "뷰 Ryan",
    };
  },
  methods: {
    Hi() {
      this.message = "Mixin 밖에서 선언했어!";
      console.log("Vue 인스턴스 클릭 이벤트");
    },
  },
};
</script>

 

실핼 결과

 

 

결과 화면을 확인하면 name 속성은 Vue 인스턴스 속성에 덮어 써졌으며, 메서드 또한 Vue 인스턴스에 선언한 메서드가 실행되는 걸 보실 수 있습니다.