Vue Mixin을 사용하여 컴포넌트 재활용하기 feat. HOC의 단점

결론부터 말하자면 HOC의 단점은 사용하면 사용 할 수록 컴포넌트의 레벨이 깊어지기 때문에 데이터간 통신이 까다로워 진다.

• HOC의 단점...
  

그 부분에 있어서 Mixin이라는 방법을 사용하여 재사용성을 개선해보려고 한다.

Mixinx의 HOC와 다르게 구조가 약간 다른데 HOC때 처럼 created()를 재사용하기 위해 다음과 같이 작성했다.

src/mixins/ListMixin.js

import bus from "@/utils/bus";

// mixin
export default {
    // 재사용할 컴포넌트 옵션 & 로직
    created() {
        bus.$emit("start:spinner");
        this.$store
            .dispatch("FETCH_LIST", this.$route.name)
            .then(() => {
                console.log("fetched", this.$route.name);
                bus.$emit("end:spinner");
            })
            .catch((err) => {
                console.error(err);
            });
    },
};

HOC로 감싸주었던, 컴포넌트에 ListView.vue mixin을 적용

<template>
    <ListItem></ListItem>
</template>

<script>
import ListItem from "@/components/ListItem.vue";
import ListMixin from "@/mixins/ListMixin";

export default {
    components: {
        ListItem,
    },
    mixins: [ListMixin],
};
</script>

<style scoped></style>

HOC와는 다르게 depth가 깊어지지 않고, mixin을 활용하여 로직을 재사용 할 수 있게 되었다.

• depth가 깊어지지 않고 바로 ListVue가 보이는 모습