Component 실습

• 서두
• 컴포넌트 생성
• 컴포넌트 설명
• 컴포넌트 출력
• 결론

서두

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

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

컴포넌트 생성

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>

컴포넌트 설명

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

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

컴포넌트 출력

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

<Clock />

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

시계

16:05:00.195

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

결론

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