[Vue] Single-File Component

📚 SFC(Single File Component)에 대해서 알아보도록 하자. 들어가기에 앞서 Component란 무엇일까? Component는 재사용 가능한 코드 블록이다. 우리가 사용하는 웹 서비스는 여러 개의 Component로 구성되어 있다.

1. Single-File Component

Vue.js에서 사용되는 특별한 파일 형식으로, 하나의 컴포넌트를 구성하는 템플릿(HTML), 스크립트(JavaScript), 스타일(CSS)을 모두 하나의 .vue 파일에 포함시키는 방식

1) <template> 블록

각 *.vue 파일은 최상위 <template> 블록을 하나만 포함할 수 있다.

2) <script setup> 블록

각 *.vue 파일은 <script setup> 블록을 하나만 포함할 수 있음 (일반 <script> 제외)

컴포넌트의 setup() 함수로 사용되며 컴포넌트의 각 인스턴스에 대해 실행

-> 변수 및 함수는 동일한 컴포넌트의 템플릿에서 자동으로 사용 가능

3) <style scoped> 블록

*.vue 파일에는 여러 <style> 태그가 포함될 수 있음

scoped가 지정되면 CSS는 현재 컴포넌트에만 적용됨

---

이번 포스팅에서는 SFC에 대해서 알아보았다. 다음 포스팅에서는 Vue project를 생성하는 법에 대해서 알아보자.