0Pricing
Frontend Academy · 강의

Vue SFC: script, template, style

단일 파일 컴포넌트 형식을 이해합니다. script 블록은 로직을, template 블록은 화면을, style 블록은 범위가 지정된 CSS를 담당합니다.

Vue SFC: script, template, style은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

단일 파일 컴포넌트란 무엇인가요

Vue 단일 파일 컴포넌트(SFC)는 세 개의 블록으로 이루어진 .vue 파일입니다. <script>는 JavaScript 로직을, <template>는 HTML 보기를, <style>은 CSS를 담당합니다. 하나의 컴포넌트에 필요한 모든 것이 하나의 파일에 들어 있습니다.

<script setup lang="ts">
const greeting = 'Hello, Vue!';
</script>

<template>
  <h1>{{ greeting }}</h1>
</template>

<style scoped>
h1 { color: #42b883; }
</style>

script 블록

로직, 데이터, 가져오기, 컴포지션 API 코드를 이곳에 작성합니다. <script setup>을 사용하면 최상위 수준에서 선언한 변수와 가져온 항목을 템플릿에서 자동으로 사용할 수 있습니다.

script setup — 현대적인 방식

<script setup>은 권장되는 SFC 문법입니다. 이 안에서 선언한 변수, 계산 속성, 함수는 명시적으로 반환하지 않아도 템플릿에서 바로 사용할 수 있습니다.

<script setup lang="ts">
import { ref } from 'vue';

const count = ref(0);
function increment() { count.value++; }
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

template 블록

template에는 컴포넌트의 HTML 보기가 들어 있습니다. Vue 템플릿은 렌더링 함수로 컴파일됩니다. template 내부에서 Vue 전용 속성과 디렉티브(v-if, v-for, @click)를 사용하세요.

템플릿 보간

반응형 데이터를 텍스트로 출력하려면 큰따옴표 두 개로 감싼 중괄호 {{ }}를 사용하세요. Vue는 HTML을 자동으로 이스케이프합니다. HTML을 렌더링하려면 v-html 디렉티브를 사용하세요(주의해서 사용해야 합니다).

<template>
  <p>{{ message }}</p>
  <p>{{ count * 2 }}</p>
  <p>{{ isActive ? 'Active' : 'Inactive' }}</p>
</template>

style 블록

style 블록의 CSS는 컴포넌트에 적용됩니다. scoped를 추가하면 스타일의 범위가 이 컴포넌트의 요소로만 제한되어 실수로 전역 스타일이 유출되는 것을 방지할 수 있습니다.

<style scoped>
.card {
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* Without scoped: affects all .card elements globally */
</style>

범위가 지정된 스타일의 작동 방식

Vue는 컴포넌트 요소에 고유한 데이터 속성(예: data-v-abc123)을 추가하고, 범위가 지정된 CSS 선택자를 해당 속성을 포함하도록 다시 작성합니다. 이렇게 하면 스타일이 이 컴포넌트 안의 요소에만 일치합니다.

Vue의 CSS Modules

scoped의 대안으로 <style module>을 사용해 CSS Modules를 적용할 수 있습니다. 템플릿에서는 $style 객체를 통해 클래스 이름에 접근합니다.

<template>
  <div :class="$style.card">Content</div>
</template>

<style module>
.card { background: white; }
</style>

전역 스타일

scoped가 없는 스타일은 전역으로 적용됩니다. 일반적인 패턴은 기본 스타일과 설계 토큰을 위한 전역 app.css를 사용하고, 컴포넌트별 규칙에는 컴포넌트마다 범위가 지정된 스타일을 사용하는 것입니다.

SFC에서 TypeScript 사용하기

TypeScript를 사용하려면 script 블록에 lang="ts"를 추가하세요. 공식 Vue IDE 확장 프로그램인 Volar는 타입 검사를 거친 템플릿을 포함하여 Vue SFC에 완전한 TypeScript 지원을 제공합니다.

SFC 파일 이름 지정

템플릿에서 사용하는 컴포넌트의 SFC 파일은 PascalCase(UserProfile.vue)로 이름을 지정하세요. Vue는 HTML 요소와 충돌하지 않도록 여러 단어로 된 이름을 권장합니다.

빠른 확인

Vue <style> 블록의 scoped 속성은 어떤 역할을 하나요?

복습: Vue 단일 파일 컴포넌트

.vue 파일에는 세 개의 블록이 있습니다. 스크립트(로직), 템플릿(뷰), 스타일(CSS)입니다. 현대적인 컴포지션 API 방식을 사용하려면