지난 포스트에서는 Vue CLI를 이용해 Vue 프로젝트를 생성했다. 이제 본격적으로 Vue를 이용해 어플리케이션을 만들 차례이다.
이번 포스트에서는 Vue의 핵심 개념 중 하나인 Component와 Props를 이해하며, TypeScript로 이를 이용하는 방법을 알아본다.
본 튜토리얼에서는 Vue의 모든 부분을 커버하려 노력하지 않을 것이다.
TypeScript와 클래스 스타일 컴포넌트를 사용하는 것에 주력할 것이며, 그 외 공식 문서에서 자세히 설명되고 있는 부분들은 생략될 수 있다.
Component
프로젝트를 시작했을 때 자동으로 만들어진 웹 어플리케이션을 기반으로, 새로운 컴포넌트를 추가할 것이다.views/About.vue에 새로 만들 컴포넌트 AboutMe를 등록한다.
새로 만들어질 컴포넌트의 경로를 components/AboutMe.vue라고 가정하고, 이를 import한다.
그리고 이 컴포넌트 AboutMe는 현재 클래스 About에 컴포넌트로써 선언된다.
1 | <script lang="ts"> |
2 | import { Component, Vue } from 'vue-property-decorator'; |
3 | import AboutMe from '@/components/AboutMe.vue'; |
4 | |
5 | @Component({ |
6 | components: { |
7 | AboutMe, |
8 | }, |
9 | }) |
10 | export default class About extends Vue {} |
컴포넌트 AboutMe에는 3개의 데이터 name, age, phrase를 내려보내려 한다.
1 | <template> |
2 | <div class="about"> |
3 | <h1>This is an about page</h1> |
4 | <AboutMe name="Seulki Bae" age=3 phrase="I'm hungry"/> |
5 | </div> |
6 | </template> |
다음은 컴포넌트 components/AboutMe.vue를 만들 차례이다.
부모 컴포넌트 About으로부터 건네받는 3개의 데이터를 프로퍼티로써 선언한다.
1 | export default class AboutMe extends Vue { |
2 | @Prop() private name!: string; |
3 | @Prop() private age!: number; |
4 | @Prop() private phrase!: string; |
5 | } |
그리고 위 프로퍼티들을 이용해 적당히 Template을 만들어 확인해보자.
Prop
위의 예제까지는 프로젝트를 생성할 때 만들어진 데모 어플리케이션에서 보여주고 있는 것과 다른 점이 없다.
데이터를 자식 컴포넌트에게 프로퍼티로써 건네줄 때, 템플릿 안에서 각 데이터를 정적으로 할당하고 있는데, 당연하게도 우리는 어플리케이션을 만들 때 클래스에 속해있는 데이터를 건네주고 싶어진다.
먼저 정적 데이터들을 클래스 내 데이터로 가져온다.
1 | export default class About extends Vue { |
2 | private myName: string = 'Seulki Bae'; |
3 | private myAge: number = 3; |
4 | private myPhrase: string = 'I\'m hungry'; |
5 | } |
이제 템플릿에서 데이터들을 자식 컴포넌트 AboutMe에 바인드한다.
데이터는 디렉티브 v-bind:를 이용해 간단하게 바인드할 수 있다.
1 | <AboutMe v-bind:name="myName" v-bind:age="myAge" v-bind:phrase="myPhrase"/> |
v-bind:name은 :name로 줄여서 사용할 수 있다. 개인적으로는 코드가 장황해지는 것을 피하기 위해 디렉티브의 약기를 사용하는 것을 선호한다.
주의할 점은 둘을 섞어 사용하지 않도록 하는 것이 중요하다는 것이다. 이는 Vue.js의 스타일 가이드에서도 주의하고 있다.
1 | <AboutMe :name="myName" :age="myAge" :phrase="myPhrase"/> |
Prop vs. Data
Vue에 익숙하지 않다면, Prop(프로퍼티)와 데이터의 차이에 대해 궁금해질 것이다.
간단하게 말하자면, 프로퍼티는 부모 컴포넌트로부터 내려받은 데이터이며, 데이터는 해당 클래스가 소유하고 있는 데이터이다.
더 자세히 알고 싶다면, Props vs Data in Vue를 참고하자.