[VUE] 뷰 하이오더컴포넌트 (HOC) 로 컴포넌트 템플릿화 하기 (vue2 vue3)

[VUE JS] 뷰 high order component (하이오더 컴포넌트)로
컴포넌트 템플릿 화 하기

 

 

주의 -

참고로 뷰는 버전별로 설정 방법이나 호출 함수 등 다른 부분이 많기에

뷰 관련 자료를 검색시에는 자신이 사용하고 있는 뷰의 버전을 정확히 입력하는게 좋다

ex) vue2 hoc || vue3 hoc ... 

뷰에서 하이오더 컴포넌트란?

비슷한 옵션을 갖춘 컴포넌트를 함수로 만들어주는 방식

 

샘플예제

//VUE 2 버전
import 호출할자식컴포넌트이름 from "./호출할자식컴포넌트 경로"

export default function makeComponent(componentName) => {
	return {
		// 기본적인 컴포넌트 옵션 (VUE3와 같음)
        name : componentName,
        data () {...},
        methods : {...}, 
        
        //컴포넌트 생성
        render (createElement) {
        	return createElement(호출할자식컴포넌트이름);
        }
        
	}
}


//VUE 3 버전
import {h} from 'vue';	//createElement 대신 사용할 vue 내 컴포넌트 생성 함수
import 호출할자식컴포넌트이름 from "./호출할자식컴포넌트 경로";

export default function makeComponent(componentName) => {
	return {
		// 기본적인 컴포넌트 옵션 (VUE2와 같음)
        name : componentName,
        data () {...},
        methods : {...}, 
        
        //컴포넌트 생성
        render () {
        	return h(호출할자식컴포넌트이름);
        }
        
	}
}

 

 

HOC 장점 ?

자바스크립트 함수처럼 한번 만들어 놓고 

라우터 내에서 계속 호출해서 사용하면 되기 때문에 

컴포넌트 생성이 빠르고 편리하다

 

HOC 단점 ?

공통 / 모듈화의 단점이기도 한데

하이오더 컴포넌트로 만들어진 컴포넌트의

커스텀화가 복잡하다.. 같은 형식의 컴포넌트가

반복되었을때만 사용하는 것이 좋다.

또한 컴포넌트의 depth 가 더 깊어진다