Component 실습

서두

VuePress의 장점 중 하나는 Vue Component를 사용할 수 있다는 점이다. 내가 VuePress를 선택한 이유 중 하나이기도 하다. Using Vue in Markdown | VuePress를 참고하자.

본문에서는 실제 간단하게 시계 컴포넌트를 작성해서 사용해보도록 하겠다.

컴포넌트 생성

Clock 컴포넌트를 생성한다. 나도 Vue를 배우는 단계라서 정확한 코딩인지는...

// docs/.vuepress/components/Clock.vue

<template>
  <div class="wrapper">
    <h3 class="title">시계</h3>
    <p class="datetime">{{time}}</p>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        date: new Date()
      }
    },
    methods: {
      onEverySecond: function () {
        this.date = new Date()
        setTimeout(this.onEverySecond, 1000)
      }
    },
    mounted: function () {
      this.onEverySecond()
    },
    computed: {
      time() {
        return `${this.date.toLocaleTimeString()}.${this.date.getMilliseconds()}`
      }
    }
  }
</script>
<style scoped>
// 생략
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

컴포넌트 설명

매우 간단한 시계인데, 몇가지 주목할 점이 있다.

  • 커스텀 메소드 onEverySecond를 사용
  • 라이프사이클 훅 mounted을 이용해서 초기화
  • 시간 정보 date 값을 이용해서 계산된 속성 time을 정의

컴포넌트 출력

컴포넌트는 간단히 마크다운 본문에 삽입만 하면 된다.

<Clock />
1

그러면 아래처럼 시계가 등장!

시계

13:21:14.629

일부러 밀리초까지 찍어보았는데, 실제 호출은 1000ms 단위로 설정했지만 데이터 변화 감지나 Vue 엔진 오버헤드가 있으므로 약간 더 소요되는 것을 볼 수 있다.

결론

아주 간단한 컴포넌트를 만들어 보았다. React와 Angular를 사용해본 입장에서는 매우 간결하다는 점이 눈에 띈다. 성능이나 이런걸 떠나서 개발 생산성 측면에서 매우 우수하다고 느꼈다. 특히 Syntax Sugar가 다른 프레임워크보다 월등히 적다.

최종 수정: 2018-12-6 04:22:34