🍳 HOC사용하여 로직 공통화 시키기

🥙 기능 공통화 상황

아래 사진 처럼  "테스트" 라는 버튼을 누르면 '모던,럭셔리' 와 '1990,2000s' validation 기능이 중복이 된다.

실제 실무에서는 로직이 이것보다 더 복잡하게 돌아가지만, 테스트를 위해서 간단하게 빈값 체크 정도만 기능을 넣었다.

큐레이션

 

🥙 전체적인 구조

withCuration을 통해 validation의 기능을 props으로 전달하고, props으로 전달 받은 컴퍼넌트들은 validation을 통해 기능을 사용할 수 있다.

 

🍟 withCuration.js 작성

const withCuration = (component) => {
  return {
    name: "withCuration",
    data() {
      return {
        curationInfo: {
          mood: [
            {
              text: "모던",
              value: 1
            },
            {
              text: "럭셔리",
              value: 2
            }
          ],
          peroid: [
            {
              text: "1990",
              value: 1
            },
            {
              text: "2000s",
              value: 2
            }
          ]
        }
      }
    },
    created() {

    },
    mounted() {
    },
    methods: {
      validation(
        curation = {
          mood: [],
          peroid: [],
          moodAlert: () => { },
          peroiAlert: () => { }
        },
        validateFn = () => { }
      ) {
        if (curation.mood.length === 0) {
          curation.moodAlert();
          return false;
        } else if (curation.peroid.length === 0) {
          curation.peroiAlert();
          return false;
        }
        validateFn();
      }
    },
    render(createElement) {
      return createElement(component, {

        props: {
          curationinfo: this.curationInfo,
          validate: this.validation
        },
      })
    }
  }
}
export { withCuration }

props에서 큐레이션 값들을 던져준다 여기서는 mood(분위기)와 , peroid를 전달해준다. 그리고 validate라는 것을 전달해주며, 이것은 큐레이션이 빈값을 체크해주는 함수이다.

 

 

 

🥗 withCuration.js 상속 받도록 작성

 

curationView.vue

import { withCuration } from "@/hoc/withCuration";
import curationView from '@/views/userLayout/curationView.vue'


const routes = [
      {
        path: "/curation",
        name: "curationView",
        component: withCuration(curationView)
      }
]

 

CurationComp.vue

import CurationComp from '@/components/CurationComp.vue';
import { withCuration } from '@/hoc/withCuration';

export default {
	components: {
    	'curation-comp': withCuration(CurationComp)
    }
}

 

curationView.vue와 CurationComp.vue 는 withCuration을 통해서 상속을 받는 다 그러면 vue-devtools에서 아래사진처럼 확인이 가능하다.

vue-devtools

 

 

🧆 자식컴퍼넌트에서 withCuration 함수 호출

<template>
  //기능이 중요하므로, template은 생략한다.
</template>
<script>
export default {
  name: 'CurationComp',
  props: {
    validate: {
      type: Function,
      default() {
        return 'Default function'
      }
    },
    curationinfo: {
      type: Object,
      default: () => {
        return {}
      }
    },

  },
  data() {
    return {
      mood: [],
      peroid: [],
    };
  },

  mounted() {

  },

  methods: {
    clickTest() {
      const send = {
        mood: this.mood,
        peroid: this.peroid,
        moodAlert: () => {
          alert('분위기를 선택해주세요.')
        },
        peroiAlert: () => {
          alert('시대를 선택해주세요.')
        }
      }
      //1.pros으로 전달받은 validate를 호출한다.
      //2.send에는 mood,peroid,moodAlert,peroiAlert 를 통해 validate인자에 넣는다.
      //2-1.moodAlert은 moodAlert은 validation을 실패했을때 peroiAlert은 peroid가 빈값일때 동작하는 함수이다.
      this.validate(send, this.alertValidate);
    },
    alertValidate() {
      alert(`validation에 성공하였습니다.`)
    }
  },
};
</script>
<style scoped src="@/assets/styles/modal.css"></style>

validate함수를 호출하고, mood,peroid,moodAlert,peroidAlert를 전달하면 moodAlert,peroidAlert은 mood와 peroid가 빈값이면 동작하는 함수 이다.

 

🫕  후기

hoc를 통해 기능을 공통화 시켰지만, hoc는 컴퍼넌트 깊이가 깊어진다는 단점이 있다. mixin을 쓸려니 데이터나 메소드가 겹치면 덮어씌우기가 된다. 프로젝트가 커질수록 이것은 추척이 어렵기때문에, hoc가 컴퍼넌트 깊이가 깊어진다는 단점이 있음에도 불구하고 선택하였다.