3.2.3 SFC의 구조

SFC는 뷰만의 특별한 파일 형태로, 확장자가 vue인 단일 구성 요소입니다. 단일 구성 요소는 하나의 파일에 인스턴스 구성 요소와 관련한 모든 코드가 포함되는 형식을 의미합니다. 다음 형식에서 보듯이 HTML, CSS, 자바스크립트 코드를 한 파일 안에 작성할 수 있습니다.

<script>
export default {} 
</script> 
<template></template> 
<style></style>

SFC는 일반적으로 <script>, <template>, <style>의 3가지 태그 영역으로 구성됩니다. 주의할 점은 SFC 파일에 <template> 태그를 1개 이상 포함해야 한다는 점입니다. 그렇지 않으면 뷰 애플리케이션을 실행할 때 오류가 발생합니다. <script> 태그와 <style> 태그는 선택 사항이므로 필요하지 않으면 사용하지 않아도 됩니다.

각 영역의 특징은 다음과 같습니다.