하이오더컴포넌트(HOC) 간단 정리

 

Higher Order Component (HOC)

• 함수형 기반 재사용 방식이다.
• 컴포넌트 로직을 재사용할 수 있다.
• 컴포넌트를 인자로 받고 컴포넌트를 반환하는 컴포넌트이다.

 

예를 들어 ...

/hoc1 링크로 이동하면 A페이지,

/hoc2 링크로 이동하면 B페이지가 나오는 구조일 때

A, B페이지가 거의 똑같다면

 

각각 view를 만들기보단 컴포넌트의 컴포넌트를 만들고

용도에 맞게 컴포넌트를 return 하는 식으로 만들어보자.

 

즉, 한 컴포넌트 로직을 그대로 재사용하기!

 

코드를 보면서 이해해보자

// routes/index.js

import Vue from 'vue';
import VueRouter from 'vue-router'
import createView from '../views/HocView.js'

Vue.use(VueRouter);

export const router = new VueRouter({
  routes: [
    {
      path: '/hoc1',
      name: 'hoc1',
      component: createView('Hoc1'),
    },
    {
      path: '/hoc2',
      name: 'hoc2',
      component: createView('Hoc2'),
    },
  ]
})

 

route를 보면 링크에 맞게 component를 바로 연결해주는 것이 아닌

createView 함수를 import 하여 함수 호출하고 있다.

 

 

createView함수를 불러온 파일을 보자

// script로만 이루어짐
// 함수형 기반의 재사용 방식이기 때문에

import ListView from './HocListView.vue'

// export default로 냅다 function을 하나 꺼내는 것
export default function createView(name) {
  return {
    // 재사용할 인스턴스, 컴포넌트 옵션들이 들어갈 곳
    name,
    created() {
      // router name에 따라 action
      this.$store.dispatch('FETCH_HOC_LIST', this.$route.name);
    },
    render(createElement) {
      return createElement(ListView);
    },
  }
}

 

해당 파일은 script로만 이루어졌고, 오직 createView 함수를 export 하고 있다.

그리고 함수는 router name 에 맞게 action을 호출(api)하고,

import한 ListView 컴포넌트도 render (virtural DOM return) 하고 있다.

(그래서 ‘컴포넌트의 컴포넌트’ 라고 하는 듯?)

 

 

---

 

 

추가로 action에서 인자로 받은 name은 어떻게 api 분기 처리 하는 지 알아보자

// ○ action
FETCH_HOC_LIST({commit}, pageName) {
	// api 호출 (데이터 내놔!)
  fetchHocList(pageName)
  .then( ({ data }) => {
		// mutation 호출 (받아온 값 저장해라)
    commit('SET_HOC_LIST', data)
  })
  .catch(error=>{
    console.log(error);
  })
}

=======================

// ○ api (**name에 따라 다른 api 호출)
function fetchHocList(pageName) {
  if (pageName === 'hoc1') {
    return axios.get(`어쩌구/hoc1.json`)
  } else {
    return axios.get(`어쩌구/hoc2.json`)
  }
}

======================

// ○ mutation
SET_HOC_LIST(state, data) {
  state.hocList = data;
}

======================

// ○ state
hocList: []

 

그냥 코드보면 바로 이해갈 것이다.

action 호출 시 name 인자로 받고

api 내부에서 name 분기처리하여 패치하고 있다.

그리고 프로미스로 mutation, state까지 저장한다.

 

끝

 

 

 

흠 …

솔직히 이렇게 까지 써야 하나 아직 와 닿진 않는다.

hoc가 필요한 상황이 와도 생각 못하고 무식하게 만들 듯?ㅠ