[Vue.js] 재사용 & 컴포지션 - (2) 플러그인 & 필터

이전에 정리한 재사용 & 컴포지션 세션의 나머지 부분이다. 딱히 나눈것에 대한 의미는 없다. (분량이 길어진걸 뿐)

---

💚 Plugin(플러그인)

Plugin(플러그인)은 전역 수준의 기능을 Vue에 추가하는 문법이라고 소개하고 있다.

실제로, 우리 회사도 modal을 키는 기능도 mapMutation이 아닌 플러그인으로 구현하며 store 활용을 최소화했다.

이렇듯 일종의 모든 곳에서 활용성이 높은 메서드를 제공하기 위한 문법이며, 플러그인엔 다양한 유형이 있다.

1. 약간의 전역 속성 혹은 메서드 추가 (vue-custom-element, HTML 태그를 커스텀하는 플러그인)
2. 하나 이상의 글로벌 에셋 추가 : 디렉티브 / 필터 / 트랜지션 등 (vue-router, 라우팅 기능)
3. 글로벌 mixin으로 일부 컴포넌트 옵션 추가 (vuex, 전역상태)
4. Vue.prototype 에 Vue 인스턴스 메서드를 연결하여 Vue 인스턴스 메서드 추가 (추가 메서드)
5. API를 제공함과 동시에 일부 조합을 주입하는 라이브러리 (vue-router)

 

1. 플러그인 사용하기

Vue.use() 글로벌 메소드를 통해 플러그인을 호출할 수 있다.

// `MyPlugin.install(Vue)` 호출
Vue.use(MyPlugin, { someOption: true })

new Vue({
  //... options
})

Vue.use() 는 같은 플러그인을 여러번 호출해도 한 번만 설치되며,

vue-router와 같은 공식 플러그인은 자동으로 Vue.use() 를 호출하나, CommonJS 모듈환경에선 Vue.use() 를 호출해야한다.

 

2. 플러그인 작성하기

 

1) 제작

import Chart from 'chart.js';

export default{
    install(Vue){
        //다른 컴포넌트나 main.js에서 Vue.use(ChartPlugin) 을 명시할 경우 ChartPlugin.install(Vue)이 실행된다.
        Vue.prototype.$_Chart = Chart;         (1)
    }
}

Vue.use() 를 호출하면 플러그인에 정의된 install() 메서드가 호출된다.

이렇게, Vue.prototype에 $_Chart 라는 메서드를 추가함으로서, 앞으론 import 필요없이 Chart에 접근할 수 있다.

 

2) 추가

// main.js
import Vue from 'vue';
import App from './App.vue';
import {router} from './routes/index.js';
import { store } from './store/index.js';
import ChartPlugin from './plugins/ChartPlugin.js';

Vue.use(ChartPlugin);

new Vue({
  render: h => h(App),
  router,
  store,
}).$mount('#app')

이처럼, main.js 에서 Vue.use() 에서 플러그인을 호출해주면 된다.

 

3) 사용

// components/BarChart.vue

<template>
  <canvas ref="barChart" id="barChart" width="400" height="400"></canvas>          (1)
</template>

<script>
export default {
    mounted(){
        // var ctx = document.getElementById('barChart');
        var myChart = new this.$_Chart(this.$refs.barChart, { ....                 (2)

이렇게, 컴포넌트에서 this.$_Chart(메서드명) 으로 바로 호출이 가능하다.

---

💚 Filters(필터)

Vue에서 텍스트 형식화를 위한 기능을 지원하는데 이를 필터라고 한다. 텍스트 양식설정에 많이 쓰인다고 보면 된다.

<template>
  <v-app>
    <v-container>
      <v-text-field v-model="test"></v-text-field>
      <div>{{test | capitalize}}</div>
    </v-container>
  </v-app>
</template>

<script>
export default {
  data: () => ({
    test: "test"
  }),
  filters: {
    capitalize: function(value) {
      if (!value) return "";
      value = value.toString();
      return value.charAt(0).toUpperCase() + value.slice(1);
    }
  }
};
</script>

기본적인 filter 사용법이다. test라는 값에, capitalize라는 필터(첫 글자만 대문자)를 적용하고 있다.

컴포넌트의 filters 속성을 통해 필터를 정의하며, 적용할 때는 파이프("|") 문법을 사용하면 된다.

 

<!-- v-bind 표현 -->
<div v-bind:id="rawId | formatId"></div>

또한, 이처럼 v-bind 되는 값에도 적용할 수 있다.

 

- 전역 필터

이처럼, Vue 인스턴스가 형성되기 전에 미리 전역 필터를 걸어주는 방법도 있다.

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

 

- 필터 체이닝

필터는 여러개가 체이닝 될 수 있다.

{{ message | filterA | filterB }}
{{ message | filterA('arg1', arg2) }}

---

 

[출처]

- Vue.js 공식문서 : https://kr.vuejs.org/v2/guide/filters.html

- 자전축 님의 블로그(플러그인) : https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=pjok1122&logNo=221648913591 

- 강디너 님의 블로그(필터 예제) : https://kdinner.tistory.com/57