[Vue.js] Higher-order Component(하이오더컴포넌트)

1. HOC(하이오더 컴포넌트)란?

뷰의 HOC(Higher-order Component)는 React의 하이오더 컴포넌트에서 기원한 것으로 컴포넌트 로직을 재사용하기 위한 기술이다.

반복되는 형식의 컴포넌트 로직을 함수처럼 HOC로 구현하여 불필요하게 반복되는 코드를 줄일 수 있고, 라우터 내에서 계속 호출하여 사용할 수 있어서 컴포넌트의 생성이 빠르고 편리하다.

2. HOC 적용하기

아래와 같이 두 개의 컴포넌트가 있다. 두 컴포넌트는 동일하게 반복되는 구조를 가지고 있으므로 HOC를 적용해 보도록 하자.

<!-- ProductList.vue -->
<template>
  <section>
    <ul>
      <li v-for="product in products">
        ...
      </li>
    </ul>
  </section>
</template>

<script>
import bus from './bus.js';

export default {
  name: 'ProductList',
  mounted() {
    bus.$emit('off:loading');
  },
  // ...
}
</script>

<!-- UserList.vue -->
<template>
  <div>
    <div v-for="product in products">
      ...
    </div>
  </div>
</template>

<script>
import bus from './bus.js';

export default {
  name: 'UserList',
  mounted() {
    bus.$emit('off:loading');
  },
  // ...
}
</script>

위 2개의 컴포넌트에서 반복되는 구조는 아래와 같다.

name: 'component name',
  mounted() {
    bus.$emit('off:loading');
  },

따라서 코드를 HOC로 구현하게 되면 아래와 같이 작성이 가능하다.

// CreateListComponent.js
import bus from './bus.js'
import ListComponent from './ListComponent.vue';

export default function createListComponent(componentName) {
  return {
    name: componentName,
    mounted() {
      bus.$emit('off:loading');
    },
    render(createElement) {
      return createElement(ListComponent);
    }
  }
}

그리고 작성한 HOC를 사용하기 위해 router.js 파일을 수정한다.

import createListComponent from './createListComponent.js';

new VueRouter({
  routes: [
    {
      path: 'products',
      component: createListComponent('ProductList')
    },
    {
      path: 'users',
      component: createListComponent('UserList')
    },
    ...
  ]
})