[Vue] SFC(Single File Component)

 

SFC란 Single File Componentd의 약자로 단일 파일 컴포넌트다.

말 그대로 하나의 파일이 하나의 컴포넌트가 된다 라는 뜻이다.

 

이전에 cdn으로 Vue를 사용했을 때 컴포넌트를 생성하려면

new Vue({
	el: '#app',
    components: {
    	'app-header': {
        	template: '<div>{{ propsData }}</div>',
            props: ['propsData']
        },
    },
    data: {
    	message: 'hello',
        number: 10
    }	
});

template, props, data.. 등 Vue 인스턴스에 필요한 모든 요소를 Vue 객체 안에 정의해야 했다.

 

SFC를 이용하면 보다 직관적인 component 생성이 가능하다.

 

💡 .vue 파일 생성

<template>
	// html code..
</template>

<script>
	// script code..
<script>

<style>
	// css code..
</style>

 

이렇게 html, script, css를 나누어 생성할 수 있어 보다 직관적이고 편리하게 생성할 수 있다.

 

✅ template

template는 무조건 하나의 루트 엘리먼트를 포함해야 한다.

(vue3는 여러개의 루트 엘리먼트가 허용되지만 권장하지는 않는다.)

내용은 문자열로 추출(``)되어 컴파일된 Vue Component의 template 옵션으로 사용된다.

 

✅ script

기본언어는 javascript 이다.

ES6를 지원해 import와 export를 사용할 수 있다.

 

✅ style

<style scoped>처럼 scoped 속성을 이용해 css 범위를 제한할 수 있다.

 

 

📌 참고자료

 

Vus.js :: Single-File Components