Vue.js Mixins: 믹스인은 왜 필요한가? :: 마이구미

이 글은 Vue.js 기능 중 하나인 믹스인(Mixin) 을 다룬다.

뷰를 사용하고 있더라도 생소할 수 있지만 유용한 기능이고, 알게 된다면 사용할 수 밖에 없을 것이다.

공식 문서 - https://kr.vuejs.org/v2/guide/mixins.html

참고 링크 - https://css-tricks.com/using-mixins-vue-js/

뷰는 독립적인 단위인 컴포넌트를 통해 구현된다.

하나의 상황으로 비슷한 2개의 컴포넌트를 가지고 있다고 가정해본다.

같은 기능을 가지고 있지만, 확실히 서로 다른 컴포넌트이다.

이러한 경우 2가지 방법을 생각해볼 수 있다.

1. 1개의 컴포넌트로 만들고 props 를 이용해 구분한다.
2. 기존대로 2개의 컴포넌트로 분리한다.

2가지 방법 모두 퍼펙트 하지않다.

1개의 컴포넌트 방식은 props 의 수가 많아지는 것은 지저분하고 관리하기도 힘들다.

2개의 컴포넌트 방식은 두 곳을 모두 신경써야하기 때문에 변경 시 위험이 존재한다.

이를 해결하기 위해 뷰에서는 믹스인 기능을 제공하고 있다.

믹스인(Mixin) 은 무엇인가?

믹스인은 뷰에서 나온 용어가 아닌 이미 사용되고 있는 용어이다.

본인은 간단히 표현하면 다음과 같다.

믹스인(Mixin) 은 다중 상속을 지원한다. 그리고 구현된 인터페이스라고 볼 수 있다.

뷰에서의 믹스인은 컴포넌트에 재사용 가능한 기능을 배포하는 유연한 방법이다.

믹스인을 통해 다른 컴포넌트들은 캡슐화된 기능을 사용할 수 있다.

그로 인해 같은 동작이지만, 서로 다른 실행을 통해 처리된다.

See the Pen Mixins in Vue.js by leejunghyun (@mygumi) on CodePen.

위 예제는 toggle 기능을 mixin 으로 분리한 형태이다.

각 컴포넌트는 mixin 을 통해 동일한 기능을 사용한다.

기능에 대해 컴포넌트들이 공유하는 것이 아니라 상속 받는다고 생각하면 된다.

그로 인해 각 컴포넌트는 신뢰할 수 있는 동작을 보장받는다.

믹스인을 JAVA의 추상 클래스 개념으로 바라볼 수도 있다.

어떻게 보면, 추상 컴포넌트라고 볼 수 있다.

하지만 생각할 수도 있다는 것이고, 굳이 말하면 상속보다 포함 관계에 더 가깝다.

믹스인의 장점은 무엇인가?

캡슐화 및 공통된 기능을 분리시켜 코드 재사용성을 높혀준다.

오버라이딩 기능도 사용할 수 있어 커스텀 및 확장에 용이하다.

믹스인의 대안은 없는가?

뷰에서 사용하는 plugin 패턴, extend() 사용이 있다.

하지만 믹스인보다 나은 점이 없다.

개인적인 견해는 믹스인이 가장 퍼펙트하다고 생각한다.

비교는 다음 링크를 참고하기 바란다.

https://laracasts.com/discuss/channels/vue/how-to-encapsulate-common-functionality-in-vuejs

믹스인 사용에 있어 주의할 점은 무엇인가?

뷰를 사용한다면, 공통된 얘기이다.

라이프사이클을 이해한다면 크게 문제될 게 없다. (Vue 라이프사이클)

의문이 들 수 있다.

믹스인 사용은 js 파일을 통해 import 하는 형식으로 사용된다.

그렇기에 여러 곳에서 사용된다면 파일 크기가 커질 우려가 있다고 생각할 수 있다.

하지만 웹팩을 사용한다면, 이러한 걱정은 염려하지 않아도 된다.