VueJS 에서 Typescript로 개발하기 3

in Front-end - VueJS

vue-property-decorator 에 대해 알아봅시다.

vue-property-decorator 는 vuejs 에서 typescript로 개발할 때, 클래스 컴포넌트 스타일로 개발하기 쉽게 도와주는 데코레이터 들입니다. 제공해 주는 데코레이터들로는

  • @Emit
  • @Inject
  • @Model
  • @Prop
  • @Provide
  • @Watch
  • @Component

가 있습니다. 이 중 @Component 데코레이터와 @Prop 데코레이터는 지난 포스팅에서 살펴 봤습니다.

그럼 우리가 Vue와 typescript를 사용하면서 제일 많이 사용하게 될 @Prop 데코레이터부터 살펴보도록 하겠습니다.

@Prop()

1
@Prop(options: (PropOptions | Constructor[] | Constructor) = {}) decorator

출처: https://github.com/kaorun343/vue-property-decorator

위와 같은 형식으로 사용하며,

1
2
3
4
5
6
7
8
import { Vue, Component, Prop } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
  @Prop(Number) propA!: number
  @Prop({ default: 'default value' }) propB!: string
  @Prop([String, Boolean]) propC!: string | boolean
}

이렇게 만들어진 코드는 아래 코드와 같습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
export default {
  props: {
    propA: {
      type: Number
    },
    propB: {
      default: 'default value'
    },
    propC: {
      type: [String, Boolean]
    },
  }
}

default 옵션을 통해 기본값을 지정할 수도 있습니다.

@Emit()

Emit 데코레이터는 자식 -> 부모 컴포넌트로 이벤트 바인딩을 할때 주로 사용합니다.

1
@Emit(event?: string)

형식으로 선언되며, Emit 하고자 하는 event 명을 string 형식으로 넣어 선언하면 됩니다.

1
2
@Emit('change')
private onChange(value: string) {}

과 같이 선언하며, ‘change’와같이 emit되는 이벤트 명을 넣지 않을 경우, 함수 명을 이벤트 명으로 사용하게 됩니다. (단, 이벤트명을 넣지 않아 자동으로 이벤트 emit이 선언된 경우에는 카멜 케이스의 함수명이 케밥 케이스의 함수명으로 변경되어 적용됩니다. 예: onChange -> on-change)

우리가 생성했던 test-project에 Emit을 사용한 코드를 넣어 봅시다.

Home.vue파일의 내용을 아래와 같이 바꿉니다.

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
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld 
      msg="Welcome to Your Vue.js + TypeScript App"
      @onClick="clickEventHandler"
      />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

@Component({
  components: {
    HelloWorld,
  },
})
export default class Home extends Vue {

  private clickEventHandler() {
    console.log('click!');
  }

}
</script>

HelloWorld에 onClick 이라는 이름으로 clickEventHandler 함수를 바인딩 했습니다.
그리고 클래스에 clickEventHandler() 라는 함수를 정의 했습니다. 해당 함수가 실행 되면 콘솔 창에 click!이라는 메세지를 출력합니다.

HelloWorld.vue 파일을 열어 내용을 아래와 같이 바꿉니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="onClick" >클릭!</button>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;

  @Emit('onClick')
  private onClick() {
    //
  }
}
</script>

.hello 클래스를 가진 div에 클릭을 할 경우 onClick함수를 실행시키는 버튼을 추가 했습니다.
그리고 onClick() 함수 앞에 Emit(‘onClick’) 이라고 Emit 데코레이터를 선언 했습니다. 이제 이 onClick() 함수가 실행되면 부모 클래스로 onClick 이벤트를 Emit 합니다.

이 Emit 데코레이터는 @Model 데코레이터와 함께 많이 사용되며, 이벤트 바인딩을 할때 필수기 때문에 잘 봐두어야 합니다.

만약, event emitting과 함께 데이터를 전달하고 싶다면??

Home.vue와 HelloWorld.vue 클래스를 아래와 같이 바꿔봅시다.

Home.vue:

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
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld 
      msg="Welcome to Your Vue.js + TypeScript App"
      @onClick="clickEventHandler"
      />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

@Component({
  components: {
    HelloWorld,
  },
})
export default class Home extends Vue {

  private clickEventHandler(message: string) {
    console.log(message);
  }

}
</script>

HelloWorld.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="(event) => onClick('클릭이벤트가 발생했했습니다.')" >클릭!</button>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;

  @Emit('onClick')
  private onClick(message: string) {
    //
  }
}
</script>

선언하는 함수의 args를 전달하고 싶은 데이터 형식으로 넣어 전달하면 됩니다.

@Model()

Model 데코레이터는 @Prop 데코레이터 다음으로 많이 쓰이게 될 데코레이터가 아닌가 합니다. Prop은 일반적으로 단방향 바인딩인데 반해, Model은 양방향 바인딩을 제공합니다.

1
@Model(event?: string, options: (PropOptions | Constructor[] | Constructor) = {}) decorator

선언방법은 위와 같습니다.

1
2
3
4
5
6
import { Vue, Component, Model } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
  @Model('change', { type: Boolean }) checked!: boolean
}

위 코드는 아래와 같은 코드와 동일한 코드입니다.

1
2
3
4
5
6
7
8
9
10
11
export default {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: {
      type: Boolean
    },
  },
}

이제 우리의 test project에 코드를 만들어봅시다.

Home.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
  <div class="home">
    {{count}}
    <HelloWorld v-model="count"/>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

@Component({
  components: {
    HelloWorld,
  },
})
export default class Home extends Vue {

  private count: number = 0;

}
</script>

count 변수를 새로 넣었고, 이를 화면에 출력하도록 했습니다.
그리고 HelloWorld 컴포넌트에는 count 변수를 v-model로 양방향 바인딩을 했습니다.

HelloWorld.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <div class="hello">
    <button @click="(event) => onChange(count+1)" >add</button>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit, Model } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {

  @Model('change', {type: Number})
  private count!: number;

  @Emit('change')
  private onChange(count: number) {}

}
</script>

HelloWorld 컴포넌트의 다른 내용은 지우고 버튼 하나만 남겨뒀습니다.
count 변수를 model로 받도록 @Model 데코레이터와 함께 선언했고, 버튼을 눌렀을 경우 받은 count에 +1을 해서 change event를 emit 하도록 선언 했습니다.

이제 컴파일 하고 버튼을 클릭 하면, Home.vue 컴포넌트에서 count값이 1씩 올라가는 것을 확인할 수 있습니다.

@Watch

@Watch 데코레이터는 값이 변경되는지를 감시하고 있다가, 변경 됐을 때 같이 선언한 함수를 실행시켜주는 데코레이터 입니다.

1
2
3
4
@Watch('count')
onChangeCount(val: number, oldVal: number) {
  //함수 내용
}

우리의 Home.vue에 count가 변경될 때 log를 찍어주는 내용을 추가해 봅시다.

1
2
3
4
@Watch('count')
private onChangeCount(val: number, oldVal: number) {
  console.log(`${oldVal} -> ${val}`);
}

를 Home.vue에 추가해 주고 확인해 봅니다.

클릭할때마다 count 의 값이 변경되고, 이를 감지해 onChangeCount가 실행되는 것을 확인 할 수 있습니다.

이 외 데코레이터(@Inject / @Provide)

Inject와 Provide는 서비스 주입 형태 사용시 사용되게 되는데, 개인적인 의견으로는 vuex 패턴으로 프로젝트를 디자인 하게 될 경우, 사용빈도가 낮아지게 되어 별도로 설명하지는 않겠습니다.

(vue 공식 페이지에서도 provide와 inject는 주로 고급 플러그인/컴포넌트 라이브러리를 위해 제공되고, 일반 애플리케이션 코드에서는 사용하지 않는 것이 좋다고 설명되어 있습니다.)

자세한 설명

다음 포스트에서는 vuex를 typescript 클래스 형태로 사용하는 법에 대해서 작성하도록 하겠습니다.

감사합니다.

Comment and share

VueJS 에서 Typescript로 개발하기 2

in Front-end - VueJS

사전준비

지난번에는 vue-cli를 통해 프로젝트를 생성 해보았습니다.

이번에는 폴더 구조와 뷰/컴포넌트 구성을 해볼텐데요,

typescript를 지원하는 에디터를 미리 설치하셔서 사용하시기 바랍니다.

저는 vscode를 주로 사용하는데요, Typescript 문법을 완벽지원할뿐 아니라 플러그인을 통해 vuejs와의 궁합도 매우 좋아 추천하는 에디터입니다. 아톰 에디터나 intelliJ를 사용해도 문제 없으니 익숙한 도구로 사용하시면 좋을 것 같아요.

추천하는 플러그인
vscode의 plugin 영역에서 vue.js extension pack 로 검색하면 나오는
플러그인팩을 추천합니다. 이거 하나 설치하면 한번에 여러개(Auto Close Tag, Vetur 등등)가 설치가 되는데요, 같이 설치되는 플러그인 중 eslint는 제거하고, tslint로 사용하고 있어요.

에디터 셋팅이 끝났다면, 해당 에디터를 사용해서 생성된 project 폴더를 여시기 바랍니다.

물론 폴더 구조는 입맛에 따라 바꿔서 사용하기도 합니다.

1
2
3
4
5
6
7
8
9
10
src           - 소스 폴더입니다. 주로 다루게 될 폴더죠.
  -assets     - static한 이미지 등의 파일이 위치합니다.
  -components - 컴포넌트들이 위치합니다. 화면을 구성하는 작은 조각들이라고 생각하시면 됩니다.
  -views      - 컴포넌트들을 모아 구성되는 화면들의 view라고 보면 됩니다. vuex를 사용하여 컴포넌트들에게 데이터를 바인딩하거나 액션을 보내기도 합니다.
  -App.vue    - 앱의 기본 컴포넌트입니다. 엔트리 포인트인 main.ts에서 호출하는 최초의 Vue 컴포넌트.
  -main.ts    - 앱이 호출되면 실행되는 엔트리 포인트입니다. 이 ts 파일에서 router, store, App.vue 파일들을 불러옵니다.
  -router.ts  - 앱의 라우팅 설정읻 들어간 파일입니다. 라우터에 대해서는 추후 설명할 예정입니다. 
  -store.ts   - 앱의 상태관리를 담당하는 store 입니다.
package.json  - 패키지매니저(npm 또는 yarn)에서 관리하는, dependency 관련 설정 파일입니다.
tsconfig.json - typescript 컴파일 관련 설정파일입니다.

이정도로만 간단히 필요한 파일들만 설명하고 넘어가도록 하겠습니다.

그럼, 이 프로젝트의 메인 컴포넌트인 App.vue를 열어보도록 하겠습니다.

상단의 <template> 태그로 html 형태로 구선된 템플릿 영역이 보이고, 하단에는 scss로 작성된 <style>이 보입니다.
template 내부에 HOME, ABOUT으로 라우터 링크가 걸려 있네요. 그리고 <router-view/> 태그도 보입니다. router에 대해서는 추후 설명하겠지만, router-view 태그는 router에서 설정된 대로 화면을 그려준다고 일단 설명 드리겠습니다.

/views/Home.vue 파일을 열어봅시다.

최상단에는 App.vue파일과 마찬가지로 <template>영역이 있습니다.
그리고 바로 하단에 <script lang=”ts”>영역이 있습니다. 이곳에 component를 구성하는 Typescript로 작성된 class들이 들어갑니다.

1
import { Component, Vue } from 'vue-property-decorator';

우리는 클래스 스타일 컴포넌트를 좀 더 편하게 사용하기 위해 vue-property-decorator를 사욯합니다.
@Component 데코레이터 외에 우리가 자주 사용하게 될 @Prop, @Emit 등의 데코레이터를 제공합니다.

1
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

그 바로 아랫줄엔 HelloWorld 컴포넌트를 import 하는 구문이 들어가 있습니다. vue 파일을 import 할 때, ‘@/component/‘ 형식으로 절대경로 참조가 가능합니다. 혹은 ‘../components/HelloWorld.vue’와 같은 형식으로 상대경로 참조도 가능합니다.

1
2
3
4
5
6
7
8
@Component({
  components: {
    HelloWorld,
  },
})
export default class Home extends Vue {

}

그리고 그 아래엔 @Component 데코레이터 안에, 이 컴포넌트에서 사용하는 다른 컴포넌트들을 components: 라는 값으로 나열해 줍니다.
이렇게 components 항목에 HelloWorld 컴포넌트를 추가해 주었기 때문에, 상단 템플릿 영역에서 <HelloWorld>와 같이 컴포넌트를 사용할 수 있게 됩니다.

1
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>

그렇다면 우리가 msg property로 넘긴 Welcom to Your Vue.js ~~~ 는 어떻게 HelloWorld 컴포넌트에서 불러올 수 있게 될까요?

/src/components/HelloWorld.vue 파일을 열어 봅시다.

line: 12 를 보면 msg라고 선언한 변수 앞에 @Prop() 이라는 데코레이터를 볼 수 있습니다. 바로 Prop이라는 데코레이터와 함께 변수를 선언 하면, 해당 변수 명의 prop을 바인딩 해서 받아올 수 있습니다.

1
2
3
4
5
Vue.component('HelloWorld', {
  // props 정의
  props: ['msg'],
  template: '<div class="hello"><h1>{{ msg }}</h1></div>'
})

ES6 스타일에서는 위와 같은 코드라고 볼 수 있습니다.

다음 포스팅에서는 vue-property-decorator 에서 제공하는 데코레이터에 대해 좀 더 자세히 다뤄보도록 하겠습니다.

Comment and share

  • page 1 of 1

shockshot@naver.com

author.bio


author.job