[Hoon] Vuejs강의 - Vue.js 에서 컴포넌트 템플릿을 정의하는 방법들 I

Vue.js 에서 컴포넌트 템플릿을 정의하는 방법들

 

Vue Router 기본편에서, Vue 는 angularjs처럼 templateUrl 을 template 부분에 활용할 수 없다고 하였는데요. 그럼, Vue 에서 컴포넌트 템플릿을 정의하는 방법들에는 어떤한 것들이 있는지 자세히 알아 보도록 하겠습니다.

 

https://vuejs.org/2015/10/28/why-no-template-url/

Why Vue.js doesn't support templateURL — Vue.js

Vue 의 저자 에반 유의 입장도 정리해 보았었는데요. 요약해 보면,

1. 컴포넌트 입장에서 html 과 js 코딩이 분리 되지 않도록 하는 것이 더 중요하다.
2. templateURL 방식은 개발 중에는 편리하지만, 상용환경에 배포하려고 할 때 비용이 많이 듭니다.
3. Webpack , Browserify 와 같은 묘듈 번들러를 사용해서 해결하기를 추천하고 있습니다.

이번 시간에는 Vue.js 에서 컴포넌트 템플릿을 정의하기 위해 지원되는 방법들에 대해 자세히 알아보도록 하겠습니다.

• Plain strings
• Template literals
• X-templates
• Inline templates
• Render functions
• JSX
• Single-file Components

# Plain strings

• String 문자열안에 템플릿을 정의
• Vue Component 템플릿을 정의하기 위한 가장 심플하고 빠른 방법
• Component 의 템플릿 부분에 한줄로 문자열을 기록하는 방법
• 가독성이 떨어지고, 코딩량이 많아지면 개발할 때도 어려워 지는 단점

Details

• Needs polyfill or transpile? No
• Need runtime template compiler? Yes

Runtime template compiler - https://kr.vuejs.org/v2/guide/installation.html
Full, Compiler, Runtime, UMD 버전 등이 있으며,
UMD : UMD 빌드는 script 태그를 통해 브라우저에서 직접 사용할 수 있습니다.
https://unpkg.com/vue의 Unpkg CDN의 기본 파일은 Runtime + Compiler UMD 빌드 (vue.js)입니다.

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <my-checkbox></my-checkbox>
</div>

Vue.component("my-checkbox", {
  template:
    '<div><input type="checkbox" id="checkbox" @click="check"/><label for="checkbox">{{ checked }}</label></div>',
  data() {
    return { checked: false };
  },
  methods: {
    check() {
      this.checked = !this.checked;
    },
  },
});

new Vue({
  el: "#app",
});

여기에 추가로 \ 이용해서, 가독성을 좀 더 높일 수 있는 방법이 있습니다.

 

Vue.component("my-checkbox", {
  template: '<div>\
  	<input type="checkbox" id="checkbox" @click="check"/>\
    <label for="checkbox">{{ checked }}</label>\
  </div>',
  data() {
    return { checked: false };
  },
  methods: {
    check() {
      this.checked = !this.checked;
    },
  },
});

new Vue({
  el: "#app"
});

 

# Template literals

• ES2015(es6) 부터는 backtick 을 사용하여 template literal 을 사용할 수 있습니다.
• Plain Strings 와 달리 embedded expressions(표현식 - https://kr.vuejs.org/v2/guide/syntax.html#JavaScript-표현식-사용) 과 multi-line 을 허용하여 가독성과 개발효율이 높아집니다.

Details

• Needs polyfill or transpile ? Yes
• Need runtime template compiler? Yes

ES2015(es6) 를 지원하지 않는 브라우저를 위해서는 polyfill 과 같은 추가적인 모듈이 필요로 합니다.

Vue.component("my-checkbox", {
  template: `
  	<div>
    	<input type="checkbox" id="checkbox" @click="check"/>
    	<label for="checkbox">{{ checked }}</label>
    </div>
 `,
  data() {
    return { checked: false };
  },
  methods: {
    check() {
      this.checked = !this.checked;
    },
  },
});

new Vue({
  el: "#app",
});

 

# X-templates

• 이 방법은 html 파일의 script 테그 안에 template 코드를 정의합니다.
• text/x-template 타입의 script 안에 template 코딩하고 id 를 이용해서, component 에서 참조할 수 있습니다.
• 장점은 Html 파일로 template markup 을 작성할 수 있으므로, 가독성과 생산성이 높아집니다.
• 단점은 Vue Component 에서 template 부분이 분리가 됩니다.

Details

• Needs polyfill or transpile ? No
• Need runtime template compiler? Yes

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <my-checkbox></my-checkbox>
</div>
<script type="text/x-template" id="checkbox-template">
  <div>
    <input type="checkbox" id="checkbox" @click="check"/>
    <label for="checkbox">{{ checked }}</label>
  </div>
</script>

Vue.component("my-checkbox", {
  template: "#checkbox-template",
  data() {
    return { checked: false };
  },
  methods: {
    check() {
      this.checked = !this.checked;
    },
  },
});

new Vue({
  el: "#app",
});

# Inline templates

• 컴포넌트가 사용되어 질때 상위 템플릿내에 컴포넌트 template 을 정의합니다.
• 장단점은 X-templates 과 유사하지만, html 의 document body 에 template 정의 되므로, SEO(Search engine optimization) 를 위해 컨텐츠에 대한 크롤링이 가능해 집니다.
• 컨텐츠 크롤링은 내부서비스나 보안이 주요한 서비스에서 무의미 하지만, 포털에 컨텐츠가 노출되는 것이 주요한 서비스의 경우 반드시 필요합니다. SFC환경의 Single Page Application 으로 개발하면 SEO 가 힘들게 되므로, Vue.js 에서도 이러한 것을 위해 Nuxt.js 를 지원하고 있습니다. Nuxt 를 쓰지않아도 Inline templates 을 통해 컨텐츠를 검색엔진에 노출할 수 있습니다.

Details

• Needs polyfill or transpile ? No
• Need runtime template compiler? Yes

Inline templates 과 x-templates 은 백엔드 프레임 워크 (예 : Laravel Blade)의 템플릿 엔진과 함께 사용할 수 있습니다.

<div id="app">
  <my-checkbox inline-template>
    <div>
      <input type="checkbox" id="checkbox" @click="check" />
      <label for="checkbox">{{ checked }}</label>
    </div>
  </my-checkbox>
</div>

Vue.component("my-checkbox", {
  data() {
    return { checked: false };
  },
  methods: {
    check() {
      this.checked = !this.checked;
    },
  },
});

new Vue({
  el: "#app",
});

 

※  Vue.js 에서 컴포넌트 템플릿을 정의하는 방법들 II 에서 계속 ...

 

 

bit.ly/3fXOzon

인프런 인강 선착순 30%(7,700원) 마지막 할인 쿠폰 - Vue.js 핵심 강의!

bit.ly/2TtRHis

[Vue.js입문~초급] Javascript 초보 Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 - 인프런

출처

 

[Vuejs 공식홈페이지] https://kr.vuejs.org/v2/guide/components-edge-cases.html#템플릿을-정의하는-다른-방법

[VuejsDevelopers 블로그] https://vuejsdevelopers.com