[Vue]Dynamic components, 내가 원할 때 내가 원하는 컴포넌트 불러오기

Intro

안녕하세요. 개발자 위성빈입니다. 최근에 Vue.js 공부를 시작했습니다. 새롭게 배운 놈이니 바로 써먹고 싶어 개인 프로젝트를 시작했죠. 프로젝트 제목은 'everything', '대시보드 위에 생각나는 모든 것을 올려보자'라는 아이디어를 바탕으로 차근차근 진행하고 있습니다. 그러다 만난 'Dynamic components', 동적 컴포넌트를 구현하면서 겪었던 것들을 오늘 적어보려 합니다.

Result

<template>
  <div class="hello">
        <!-- ... -->
    <component :is="componentLoader"></component>
  </div>
</template>

 

export default{
  // ...
    data() {
        return {
            // ...
            , currentTab: 'VueRouter'
        }
    },
  computed: {
    componentLoader() {
            const tab = this.currentTab
            return () =>import(`@/components/${tab}`)
    }
  }
}

currentTab 변수에 들어가는 String 값에 따라서 componentLoader가 동작합니다.

componentLoader는 currentTab에 맞는 컴포넌트를 동적으로 import.

결과적으로 <component>  태그 자리에 원하는 컴포넌트가 생성됩니다.

 

전체 소스 코드는 이곳에서 확인 가능하십니다.

주저리주저리

'everything' 중 Memo 기능

'everything'에 구현될 기능 중 하나인 'Memo' 기능의 모습입니다. 'Memo' 버튼을 누르면 메모장이 대시보드 위에 추가되는 기능입니다. 지금은 'Memo' 밖에 없지만 '달력'이나 '날씨' 등을 추가해 나갈 계획입니다. 이렇게 추가되는 기능들은 모두 화면 위를 자유롭게 떠다니는 Floating 기능을 공통으로 가지고 있습니다. 그래서 저는 이걸 Widget이라고 부르기로 했습니다.

Widget 컴포넌트는 Floating 기능을 가지고 있습니다. 하지만 그것 말고는 아무것도 없습니다. 떠다니는 속 빈 강정이랄까요? 하지만 그 빈 공간에 동적 컴포넌트(Dynamic Components)를 구현한다면 뭐든 떠다니는 위젯이 만들어지겠죠.

구현

new Vue({
  // ...
  components: {
    "my-component": () => import("./my-async-component")
  }
});

Vue 공식 홈페이지에서 안내하는 동적컴포넌트 구현 예시입니다. 이렇게 해두면 해당 컴포넌트가 필요할 때 동적으로 로드되기 때문에 성능상의 이점을 가질 수 있다고 알려주고 있습니다. 하지만 이건 제가 원하던 방식은 아니었습니다. 예를 들면

export default{
  // ...
  components: {
    VueRouter: () => import('@/components/VueRouter'),
    Vuex: () => import('@/components/Vuex'),
    VueDevtools: () => import('@/components/VueDevtools'),
  }
}

이렇게 n개의 컴포넌트, 즉 위젯들이 만들어진다면 n번 반복하여 components에 등록해줘야 합니다. 물론 현실적으로 생각하면 'evrerything'은 작은 프로젝트이니 이것만으로도 충분할 수도 있겠지만... 같은 코드를 n번 반복하라뇨. 싫습니다!

그래서 찾았습니다! 짜잔~

<template>
  <!-- ... -->
  <li
    ...
    @click="currentTab = tab">
    {{ tab }}
  </li>
  <!-- ... -->
  <component:is="componentLoader"></component>
</template>

 

export default{
  // ...
  data() {
    return {
      // ...
      , currentTab: 'VueRouter'
    }
  },
  computed: {
    componentLoader() {
      return () => import(`@/components/${this.currentTab}`)
    }
  }
}

computed를 활용한 동적 컴포넌트 방식. 앞서 보여드린 방식과 비슷해 보이지만 n개의 위젯이 생긴다고 하더라고 props나 data를 활용해 하나의 함수로 처리가 가능하게 되었죠. 이제 제가 생각했던 '동적 컴포넌트'가 되었습니다. 하지만!! 도대체 왜! 한 번에 되는 게 없을까요.

currentTab의 값은 제대로 변하고 있습니다만 이상하게 computed를 활용한 방식은 동작하질 않습니다. 그렇게 이유가 뭘까 하며 이것저것 해보다가 찾은건 computed의 특별함이었습니다.

export default{
  // ...
  data() {
    return {
      // ...
      , currentTab: 'VueRouter'
    }
  },
  computed: {
    componentLoader() {
      console.log(this.currentTab)
      return () =>import(`@/components/${this.currentTab}`)
    }
  }
}

만약 이렇게 componentLoader 함수에 전혀 의미 없는 console.log를 추가하면 어떨까요?

놀랍게도 이렇게 정상적으로 작동하게 됩니다.

vue의 computed는 캐싱 기능이 있습니다. 자신이 참조하고 있는 data의 값이 변하지 않았다면 캐싱된 값을 꺼내서 return하는 기능이죠. 저희 눈으로 보기엔 componentLoader가 currentTab을 참조하는 것처럼 보이지만, 실제론 그렇지 못해 동작을 하지 않았던 것이죠.

computedWatchers

이 부분을 이야기하기 위해선 computedWatchers 속성에 대해 알아봐야 합니다. 하지만 이건 Vue의 Reactivity 시스템과 관련이 있습니다. Vue의 Reactivity 시스템을 이야기를 여기에 풀어내기엔 애당초 이 글의 주제와 조금 벗어나는 게 아닌가 싶어 다른 글에 적어두겠습니다. 혹시 관심이 있으시다면 꼭 봐주세요.

그렇다면 일단!!

console.log 대신 아래처럼 바꾸면

export default{
  // ...
  data() {
    return {
      // ...
      , currentTab: 'VueRouter'
    }
  },
  computed: {
    componentLoader() {
      const tab = this.currentTab
      return () =>import(`@/components/${tab}`)
    }
  }
}

Dynamic component 끝!!!