template·script setup·style의 역할을 한 파일에서 구분합니다.
Vue SFC는 화면 구조, 컴포넌트 로직, 범위 스타일을 .vue 파일에 모읍니다. script setup은 Composition API 바인딩을 템플릿에 바로 노출합니다.
컴포넌트의 책임과 함께 바뀌는 코드가 가까이 있어 탐색이 쉬워집니다.
scoped 스타일은 선택자를 변환해 현재 컴포넌트 요소에 적용하지만 전역 디자인 토큰을 대체하지 않습니다.
style scoped가 자식 컴포넌트 내부 모든 구현을 안전하게 제어한다고 가정하지 마세요.
로컬 프로젝트에서 확인해보세요subtitle 상태와 스타일을 추가하세요.
<script setup>
const title = "Vue 강좌";
</script>
<template>
<main class="course">
<h1>{{ title }}</h1>
<p>하나의 SFC에 구조와 로직을 모았습니다.</p>
</main>
</template>
<style scoped>
.course {
border-left: 4px solid #42b883;
padding: 16px;
}
h1 {
margin: 0;
}
</style>