[VueJS] 믹스인(Mixins) 사용하기

Mixins

VueJS를 사용하게 되고 규모가 점차 커진다면 한 번쯤은 접해볼 수밖에 없는 믹스인(Mixins)에 대해 알아보자.

믹스인(Mixins)은 여러 컴포넌트 간에 공통으로 사용하고 있는 로직, 기능들을 재사용하기 위해 사용하는 방법이다.

 

하지만 Composition API의 등장으로 믹스인을 굳이 사용할 필요가 없어졌다.

그래서 이 글은 Vue3 버전을 사용하지 않으며, Composition API를 사용하지 않고 Composition API를 사용함에도 믹스인을 혼합해서 사용하는 경우에만 보면 도움이 될 것이다.

 

아 물론 Vue3의 안정화가 이미 이루어 졌지만 아직은 우리나라에서 Vue3가 많이 사용되지는 않는 듯 하니 알아두면 좋다.

 

사용 방법은 매우 간단하다 Vue의 속성중에 mixins라는 속성이 존재하는데 따로 공통부분을 작성하고 가져와서 mixins에 넣어주기만 하면 바로 사용 가능하다.

 

말로 설명하는 것보다 실제 어떻게 사용하는지 코드로 살펴보자.

---

믹스인 기본 사용법

▷ exampleMixin.js

export default {
  data() {
    return {
      msg: 'Hello World',
    }
  },
  created: function () {
    console.log('Printing from the Mixin')
  },
  methods: {
    displayMessage: function () {
      console.log('Now printing from a mixin function')
    },
  },
}

▷ component.js

<script>
import exampleMixin from "./exampleMixin.js";

export default {
   mixins: [exampleMixin],
   created: function () {
    console.log(this.$data);
    this.displayMessage();
  },
}
// EXPECTED OUTPUT
// => "Printing from the Mixin"
// => {msg: ‘Hello World’}
// => "Now printing from a mixin function"
</script>

이처럼 컴포넌트에 직접적으로 선언하지 않았더라도 Mixin에 선언된 값들을 사용할 수 있다.

---

믹스인 과 컴포넌트 속성값 충돌 시 컨셉

믹스인에서의 데이터, 메서드 같은 것들과 컴포넌트에서 선언한 값들을 동일하게 선언할 경우 충돌이 나는 상황이 생기는데, 이때 VueJS에서는 충돌 에러를 발생시키는 게 아니라 기본적으로 객체 형식을 띄고 있기 때문에 객체처럼 후에 선언된 값으로 덮어씌운다.

즉, 믹스인과 컴포넌트 둘 다 같은 속성을 가지고 있다면 컴포넌트의 속성을 사용한다는 의미이다.

 

▷ exampleMixin.js

export default {
  data() {
    title: 'Mixin'
  },
  methods: {
    conflict() {
        console.log('mixin conflict');
    }
  }
}

▷ component.js

<script>
import exampleMixin from './exampleMixin.js'

export default {
   mixins: [exampleMixin],
   data () {
      title: ‘Component’
   },
   methods: {
       conflict() {
           console.log('component conflict');
       }
   },
   created: function () {
      console.log(this.title);
      this.conflict();
   }
}
// Output: "Component" / "component conflict"
</script>

 

이 부분에 대해서 다시 한번 설명하자면 다음과 같다.

• Lifecycle 메서드(created, mouted 등)는 같은 메서드가 존재한다면 Mixin의 메서드가 먼저 실행되고 그 후에 컴포넌트의 메서드가 실행된다.(둘 다 실행된다는 의미이다.)
• data, methods 등과 같은 객체 값들은 동일한 속성이 존재한다면 컴포넌트 속성이 우선순위를 가진다.

---

참고: https://v2.vuejs.org/v2/guide/mixins.html?redirect=true 

Mixins — Vue.js

참고: https://learnvue.co/tutorials/vue-mixins

How to Manage Vue Mixins - LearnVue