지난 포스팅에서 Vue-CLI를 이용하여 실제 현업에서 어떻게 Vue 프로젝트를 생성하는지 알아봤다.
이번 포스팅에서는 Vue-CLI에서 Component 생성 방법을 알아보겠다.
SFC란?
SFC란 Single File Component의 약자로 단어 뜻 그대로 풀이하자면 단일 파일 컴포넌트다.
말 그대로 하나의 파일이 하나의 컴포넌트가 된다 라는 뜻이다.
이전에 cdn으로 Vue를 사용했을 때 컴포넌트를 생성하려면
new Vue({
el: '#app',
components: {
'app-header': {
template: '<div>{{ propsdata }}</div>',
props: ['propsdata']
},
},
data: {
message: 'hi',
num: 10
}
});template, props, methods... 등등 Vue 인스턴스에 필요한 모든 요소를 Vue 객체 안에 정의해야 했다.
SFC를 이용하면 보다 직관적인 Component생성이 가능하다.
.vue 파일 생성(component)
<template>
//html 코드
</template>
<script>
//스크립트 코드
</script>
<style>
//css코드
</style>이렇게 html, script, css를 나누어 생성할 수 있어 보다 직관적이고 편리하게 생성할 수 있다.
sfc로 component를 직접 생성해보자
<template>
<div></div>
</template>
<script>
export default {
name: "AppHeader",
data() {
return {
}
}
methods: {}
}
</script>
<style>
</style>script 부분에서 유의할 점은 기존의 data: {str: ''}의 방식이 아닌 data: function() {return {} } 으로 함수로 선언하였다.
이유는 컴포넌트의 존재 이유와도 관련이 있다.
컴포넌트는 앞서 작성한 포스팅에서도 말했듯이 코드의 중복을 줄이고 재사용성을 높인다는 특성이 있다.
즉, 하나의 컴포넌트가 여러 컴포넌트의 하위 컴포넌트가 될 수 있는데 이미 생성된 데이터 객체를 공유한다면, 같은 컴포넌트를 사용하는 모든 상위 컴포넌트의 데이터가 공유되어 같이 변경이 되는 현상이 발생한다.
즉, reactive를 담당하는 data는 component를 여러곳에 재사용하여도 항상 새로운 객체로 return 되어야 독립성을 유지할 수 있다.
