---
category: Frontend
tags: [auto-wikified, technical-documentation, frontend]
title: Vue Single-File Components (SFC)
description: "Vue Single-File Components (SFC)는 Vue 애플리케이션을 확장(Scaling Up)하고 대규모로 구축할 때 사용되는 주요 컴포넌트 형식이다 [1]."
last_updated: 2026-05-04
---

# Vue Single-File Components (SFC)

## 📌 Brief Summary
Vue Single-File Components (SFC)는 Vue 애플리케이션을 확장(Scaling Up)하고 대규모로 구축할 때 사용되는 주요 컴포넌트 형식이다 [1]. 하나의 파일 내에 템플릿(Template)과 스크립트(Script)를 함께 포함하여 캡슐화하며, Vue 3에서는 `<script setup>` 구문과 결합되어 더 깔끔하고 조직적인 코드를 작성할 수 있도록 지원한다 [2, 3]. (단, 제공된 소스에는 SFC의 아키텍처나 구체적인 기술 정의에 대한 전반적인 관련 정보가 부족하여, 문서에 언급된 코드 레벨의 실전 패턴을 중심으로 요약하였습니다.)

## 📖 Core Content
소스 데이터에 SFC 자체의 상세한 동작 원리나 컴파일 과정 등에 대한 관련 정보가 부족합니다. 다만, 제공된 소스 내에서 SFC를 다루는 실전 구성 방식은 다음과 같습니다.

*   **`<script setup>` 구문 활용과 논리적 구조화**
    Vue 3 SFC에서는 `<script setup>` 구문을 일관되게 사용하여 컴포넌트를 더 깔끔하게 작성하는 것이 권장된다 [2]. 컴포넌트 내부의 설정(setup) 함수를 구성할 때는 `ref`를 파일의 최상단에 배치하고, 그 뒤에 기능별로 관련된 코드(계산된 속성, 메서드 등)를 논리적으로 그룹화하여 배치해야 한다 [3].
*   **단일 파일 내 다중 스크립트 블록(Two Script Blocks) 사용**
    SFC에서는 필요에 따라 두 개의 스크립트 블록을 사용할 수 있다 [4]. `<script setup>` 내부에서는 `name`이나 `inheritAttrs`와 같은 Options API 속성을 선언하는 것을 지원하지 않으므로, 이러한 속성을 정의해야 할 때는 `<script setup>` 외에 별도의 일반 `<script>` 태그를 함께 선언하여 사용해야 한다 [5]. 
*   **템플릿(Template) 최적화 및 단순화**
    Vue 3의 SFC 템플릿은 프래그먼트(Fragments)를 기본적으로 지원하므로, 템플릿 내에 불필요한 최상위 래퍼(wrapper) 요소를 사용할 필요가 없다 [6]. 또한, 자바스크립트 코드 내에서는 `ref` 값을 읽기 위해 `.value`가 필요하지만, SFC의 템플릿 내부에서는(중첩된 ref가 아닌 이상) `.value`를 사용할 필요가 없다 [7]. `<script setup>`을 사용할 경우, 방출되는 이벤트는 템플릿에서 바로 사용하기 전에 반드시 `defineEmits`를 사용하여 선언해야 한다 [5].

## ⚖️ Trade-offs & Caveats
소스 데이터에 SFC 도입에 따른 빌드 과정의 오버헤드나 근본적인 아키텍처 레벨의 트레이드오프에 대한 관련 정보가 부족합니다. 그러나 SFC 내부 작성 시 마주하는 구조적 한계와 제약 사항은 다음과 같습니다.

*   **컴포넌트 비대화에 따른 유지보수 난이도 상승**
    SFC는 관련된 로직을 하나의 파일에 응집시킬 수 있는 장점이 있지만, `<script>` 섹션이 너무 길어질 경우 오히려 코드 관리가 어려워진다 [3]. 따라서 컴포넌트가 너무 방대해지면 이를 더 작고 관리하기 쉬운 여러 개의 하위 컴포넌트로 분리해야 하는 유지보수 상의 주의가 필요하다 [3].
*   **문법적 제약과 다중 태그 혼용의 번거로움**
    `<script setup>`은 문법을 단순화하지만, 앞서 언급한 바와 같이 `name`과 같은 특정 Options API 속성을 지원하지 않는다 [5]. 이 때문에 개발자는 하나의 SFC 파일 내에 `<script setup>`과 일반 `<script>` 태그를 동시에 작성해야 하는 문법적, 구조적 번거로움을 감수해야 할 수 있다 [5].

---
*Last updated: 2026-05-03*