Vue SFC.

Single File Component 구조, template/script/style, scoped CSS

SFC(Single File Component) 는 .vue 파일 하나에 template, script, style을 넣는 Vue 컴포넌트 단위입니다.

🧱 블록 구조

Vue SFC template script style 컴파일

<script setup lang="ts">
defineProps<{ title: string }>();
</script>

<template>
  <article>
    <h1>{{ title }}</h1>
    <slot />
  </article>
</template>

<style scoped>
article {
  padding: 1rem;
}
</style>

블록	역할
`<template>`	HTML-like 마크업, 디렉티브(`v-if`, `v-for`)
`<script>` / `<script setup>`	로직, import
`<style>`	컴포넌트 스타일, `scoped`/`module`

📝 template 문법 (자주 쓰는 것)

v-bind / : — 속성 바인딩
v-on / @ — 이벤트
v-model — 양방향 (input, component)
v-if / v-else, v-show — 조건부 렌더
v-for — 리스트 (:key 필수)
scoped는 속성 선택자로 스타일 격리, deep selector는 :deep(.child)
빌드 도구(Vite)가 SFC를 JS render 함수로 컴파일
React JSX와 달리 템플릿 컴파일 타임 최적화(정적 hoist 등)가 붙기 쉬움

🔗 참고 자료

Single-File Components — SFC 구조와 장점을 설명한다.
SFC Syntax Specification — <template>, <script>, <style> 스펙이다.
<script setup> — Composition API 전용 스크립트 문법을 설명한다.
Template Syntax — 템플릿 디렉티브 문법을 설명한다.