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

3.9 KiB Raw Blame History

Vue Single-File Components (SFC)

📌 Brief Summary

📖 Core Content

⚖️ Trade-offs & Caveats

3.9 KiB

Raw Blame History