Vue) 하이 오더 컴포넌트

JongIk Park·2021년 12월 28일
0

Vue.js

목록 보기
9/11
post-thumbnail

참고 사이트

하이 오더 컴포넌트란?

  • 컴포넌트의 로직(코드)를 재사용하기 위한 고급 기술

하이 오더 컴포넌트가 필요한 상황

반복되는 컴포넌트 로직 ( 반복되는 인스턴스 옵션 )

<!-- ProductList.vue -->
<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>
<!-- UserList.vue -->
<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() 에서 사용한 이벤트 버스는 서버에서 데이터를 받아오는 것이 완료되었을 때, 스피너나 프로그레스 바와 같은 로딩상태를 완료해주는 코드이다.
  • 이러한 반복되는 코드들을 줄여줄 수 있는 패턴이 하이 오더 컴포넌트이다.

하이 오더 컴포넌트로 반복 코드 줄이기

// 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(h) {
      return h(ListComponent);
    }
  }
}
  • 하이 오더 컴포넌트를 구현한 CreateListComponent 이다.
  • 하이 오더 컴포넌트를 적용할 컴포넌트들의 공통 코드들을 미리 정의한 상태이다.
// router.js
import createListComponent from './createListComponent.js';
new VueRouter({
  routes: [
    {
      path: 'products',
      component: createListComponent('ProductList')
    },
    {
      path: 'users',
      component: createListComponent('UserList')
    },
    ...
  ]
})
  • router.js 에서 하이오더 컴포넌트를 임포트 한 뒤, 각각의 컴포넌트
    이름만 정의를 해주면 컴포넌트의 기본 공용 로직인 mounted(), name 을 가지고 컴포넌트가 생성된다.
    -> 컴포넌트마다 불필요하게 반복되는 코드를 정의하지 않아도 된다.
profile
신입 프론트엔드 개발자

0개의 댓글