하이오더컴포넌트 기본사용 방법

정의

Mixin와 마찬가지로 컴포넌트의 로직을 재사용하기 위한 기술이다.

방법

1. 공통으로 사용할 부분을 js로 따로 만든다.

2. 함수를 하나 선언하고 return 해준다.

3. return에 들어가는 것 : render, 나머지 공통으로 사용되는 부분 작성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

import Component from 'component.vue';

export default function hoc(componentName) {
    return {
        name: componentName,    // 해당 이름으로 컴포넌트 생성됨
        computed() {
            
        },
        data() {
            return {
                
            }
        },
        runder(h) {
            return h(Component);
        }
    }
}

render 부분은 공통으로 사용되는 템플릿 부분을 사용하기 위한 것이다.

단점

HOC를 사용하게 되면 depth가 하나 추가된다. 이는 많이 사용하게 되면 컴포넌트의 깊이가 깊어져서 데이터 통신이 어려워진다.

1
2

일반구조 : 상위 - 하위
HOC구조 : 상위 - HOC - 하위

vue에서는 mixins와 scoped slotㅇ을 활용하고 함수형 프로그래밍이나 컴포넌트 재사용성을 극대화 하고 싶다면 HOC 활용하는것도 좋을거 같다.

Comment and share

Minxin 기본 사용방법

정의

믹스인은 여러 컴포넌트 간에 공통으로 사용하고 있는 로직, 기능들을 재사용하는 방법이다. 믹스인에서 정의할수 있는 재사용 로직은 data, methods, crated 등과 같은 컴포넌트 옵션이다.

사용방법

1. js 파일에서 객체를 반환

1
2
3
4
5
6
7
8
9
10
11

export default {
    computed() {
        
    },
    
    data() {
        return {
            
        }
    }
}

1
2
3
4
5

import Mixin from 'Mixin경로'

export default {
    mixins: [Mixin]
}

Comment and share