[VUE] if, else 최소화

엄청나거나 대단한건 아니고 실무를 하면서 빠르게 빠르게 작업하다보니 if 문이 19개가 넘어가고 앞으로 운영함에 있어 100개가 넘어갈 수 있을 것 같아 개선해보고자 흔한 아이디어를 사용해봤다.

문제점

goEventRead(eventId){
    if (eventId == 1) { // soonyang 이벤트 1
         document.documentElement.scrollTop = 0;
         this.$router.push({ name: 'soonyang', params: { "event_id": eventId } }).catch((error) => {
         if (error.name === 'NavigationDuplicated') {
              location.reload();
              }
          });
            },
    else if (eventId == 2) { // 아아 이벤트 2
         document.documentElement.scrollTop = 0;
         this.$router.push({ name: 'iceamericano', params: { "event_id": eventId } }).catch((error) => {
         if (error.name === 'NavigationDuplicated') {
              location.reload();
              }
          });
        },
    // 이후 생략
}

이런식으로 eventboard에서 이벤트를 클릭시 해당 event 창으로 넘어가는 형식이였다. 하지만 계속 이벤트를 지속할수록 else if 문은 18개를 넘어가 버려 깔끔하지 못한 코드가 되었다.

해결책

아주 간단하게 eventMap을 만들어 data() 에 넣어주자.

data(){
    eventMap : {
    1 : 'soonyang',
    2 : 'iceamericano',
    3 : /....  
    }
}
methods : {
executeEvent(eventId){
      return this.eventMap[eventId]
  },
goEventRead(eventId){
   document.documentElement.scrollTop = 0;
   this.$router.push({ name: this.executeEvent(eventId), params: { "event_id": eventId } }).catch((error) => {
   if (error.name === 'NavigationDuplicated') {
        location.reload();
        }
    });
    },
}

name 부분에 저렇게 key에서 받아온 value 값을 출력해주면 한줄로 모든것이 끝났다.