하이 오더 컴포넌트란?
- 컴포넌트의 로직(코드)를 재사용하기 위한 고급 기술
하이 오더 컴포넌트가 필요한 상황
반복되는 컴포넌트 로직 ( 반복되는 인스턴스 옵션 )
<template>
<ul>
<li v-for="product in products">
...
</li>
</ul>
</template>
<script>
import bus from './bus.js';
export default {
name: 'ProductList',
mounted() {
bus.$emit('off:loading');
},
}
</script>
<template>
<div v-for="product in products">
...
</div>
</template>
<script>
import bus from './bus.js';
export default {
name: 'UserList',
mounted() {
bus.$emit('off:loading');
},
}
</script>
- ProductList와 UserList 두 컴포넌트는 각각 상품과 사용자 정보를 서버에서 받아와 표시해주는 컴포넌트이다.
그리고 공통적으로 들어가는 코드가 있다.
name: '컴포넌트 이름',
mounted() {
bus.$emit('off:loading');
},
- name은 컴포넌트의 이름을 정의해주는 속성,
- mounted() 에서 사용한 이벤트 버스는 서버에서 데이터를 받아오는 것이 완료되었을 때, 스피너나 프로그레스 바와 같은 로딩상태를 완료해주는 코드이다.
- 이러한 반복되는 코드들을 줄여줄 수 있는 패턴이 하이 오더 컴포넌트이다.
하이 오더 컴포넌트로 반복 코드 줄이기
import bus from './bus.js'
import ListComponent from './ListComponent.vue';
export default function createListComponent(componentName) {
return {
name: componentName,
mounted() {
bus.$emit('off:loading');
},
render(h) {
return h(ListComponent);
}
}
}
- 하이 오더 컴포넌트를 구현한 CreateListComponent 이다.
- 하이 오더 컴포넌트를 적용할 컴포넌트들의 공통 코드들을 미리 정의한 상태이다.
import createListComponent from './createListComponent.js';
new VueRouter({
routes: [
{
path: 'products',
component: createListComponent('ProductList')
},
{
path: 'users',
component: createListComponent('UserList')
},
...
]
})
- router.js 에서 하이오더 컴포넌트를 임포트 한 뒤, 각각의 컴포넌트
이름만 정의를 해주면 컴포넌트의 기본 공용 로직인 mounted(), name 을 가지고 컴포넌트가 생성된다.
-> 컴포넌트마다 불필요하게 반복되는 코드를 정의하지 않아도 된다.