[Vue] Mixin으로 반복되는 메소드 모듈화시키기

Mixin을 사용해야만 하는 상황과 장점과 단점(종속성을 가지는 메소드의 경우 사용이 어렵다, 같은 구조의 데이터여야만 간섭 가능하다 등)

 

이번글에서는 Vue.js에서 제공되는 기능중 하나인 Mixin(믹스인)에 대해서 써보자 한다. mixin의 기능을 요약하자면 재사용가능한 메소드의 집합이다. 복수의 컴포넌트, 페이지에서 필요로 하는 기능이 있을때마다 코드를 작성하는것이 아닌 하나의 메소드를 작성하고 이를 재사용할 수 있도록 모듈화시켜 중앙통제형으로 분리하는것이 목적이다. 다른 객체지향 프로그래밍 언어에서의 모듈과 같은 역할이라고 생각하면 된다.

 

그런데 mixin에는 단순히 모듈화의 기능만을 지원하는것이 아니다. mixin파일의 구조는 일반적인 컴포넌트나 페이지와 비슷한 구조를 띄고 있는데, 다른점은 template태그가 없다는것이다. mixin은 컴포넌트,페이지와 똑같은 라이프사이클을 가지며 모든 훅을 사용할 수 있다. data훅이 사용된 mixin을 호출한 컴포넌트의 경우 같은 data prop으로 통합되어 사용할 수 있게 된다. 조금 다른점이 있다면 컴포넌트와 mixin은 상하관계를 가지게 되어 컴포넌트에서 mixin의 data prop을 사용할수는 있지만 그 반대(mixin에서 컴포넌트의 data prop사용)은 불가하다.

export default {
  inheritAttrs: false,
  data: () => ({
    list: [],
    name: null,
  }),
  methods: {
    func(content) {
      if (content!=null) {
        return 'not null'
      } else {
        return 'null'
      }
    }
  }
}

위처럼 작성한 mixin은 상위요소에서 불러와 사용할 수 있다.

import mainMixin from '~/mixins/example.js'
  export default {
    mixins: [mainMixin],
    mounted() {
    	console.log('mixinName: '+name)
        console.log('mixinFuncRes: '+func(null))
    }
}

말했다시피 mixin은 컴포넌트와 같은 라이프사이클을 가지기 때문에 mounted(), created(), $router등을 사용할 수 있다. 개발을 하다보면 조금씩 겹치는 mixin과 컴포넌트의 영역때문에 주객전도가 발생하기도 한다. 예를들어 목록의 데이터를 페이지에 제공해야 할 경우 두가지 방법이 있는데

 

1. mixin의 mounted훅에서 데이터를 불러와 data prop으로 페이지에게 전달
2. 컴포넌트의 mounted훅에서 데이터를 불러와 v-for로 실행 후 페이지에서 컴포넌트 호출

개발을 하다보면 1번을 2번보다 더 선호하게 될수도 있는데 이는 코드의 가독성 때문이다. 컴포넌트의 사용 목적에 따라 다르겠지만 자주 수정해야 하는 템플릿 문법의 경우 페이지(최상위 요소)에서 데이터만을 사용해서 조작하는게 편할때가 있다. 1번의 경우 mixin metheod와 data prop을 마치 처음부터 페이지에서 선언한것처럼 손쉽게 사용할 수 있지만 2번은 컴포넌트라는 개별의 vue파일을 불러오는 것이기때문에 컴포넌트와 페이지, 두개의 파일을 오가며 작업을 해줘야 한다. 뿐만아니라 $routers나 cookie등을 prop에 넣어 사용하고 있다면 둘다 똑같이 환경을 똑같이 맞춰줘야 한다.

 

여기서 조금 더 응용을 하자면 mixin에서 $router, cookie를 prop으로 넣어 사용하면 컴포넌트와 페이지에 같은 prop환경을 조성해줄 수 있지만 알다시피 이미 배보다 배꼽이 더 커진 상황이다(mixin만으로 해결할 수 있는것을 컴포넌트까지 껴넣어 필요없이 비대해졌기 때문) 이처럼 vue는 굉장히 자유도가 높기때문에 개발자가 스스로 기능의 목적을 정하고 일부 제한하는것이 필요하다.