Vue SFC

---

🧩 SFC란?

정의

SFC(Single File Component)는 하나의 .vue 파일 안에 template, script, style을 함께 작성하는 Vue 컴포넌트 형식이다.

화면 구조와 로직, 스타일을 한 파일에 모아 관리할 수 있어 Vue에서 가장 기본적인 컴포넌트 형태로 사용된다.

🏗️ 기본 구조

<script setup>
</script>

<template>
</template>

<style scoped>
</style>

🧱 각 영역의 역할

• template : 화면에 렌더링될 HTML 구조
• script : 상태, 로직, 함수, 생명주기 처리
• style : 컴포넌트 스타일
• scoped : 해당 컴포넌트에만 스타일을 적용

⚙️ script 방식

Options API

• data, methods, mounted 같은 옵션으로 구성한다.
• 전통적인 Vue 스타일이다.

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
  mounted() {
    console.log(`숫자 세기의 초기값은 ${this.count} 입니다.`);
  },
};
</script>

Composition API

• ref, reactive, onMounted 등을 사용한다.
• 로직을 기능 단위로 묶기 좋다.

<script>
import { ref, onMounted } from "vue";

const count = ref(0);

function increment() {
  count.value++;
}

onMounted(() => {
  console.log(`숫자 세기의 초기값은 ${count.value} 입니다.`);
});
</script>

<script setup>

• Vue 3에서 자주 쓰는 간결한 문법이다.
• setup()을 직접 작성하지 않아도 된다.

<script setup>
import { ref } from "vue";

const count = ref(0);

function increment() {
  count.value++;
}
</script>

🧪 사용 예시

<script setup>
import { ref } from "vue";

const message = ref("Hello Vue");
</script>

<template>
  <h1></h1>
</template>

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

⚠️ 주의점

• scoped를 쓰면 스타일 범위가 컴포넌트 내부로 제한된다.
• script setup에서는 선언한 값이 템플릿에서 바로 사용된다.
• 컴포넌트가 커지면 로직과 화면을 잘 나눠서 작성해야 한다.

📌 정리

• SFC는 Vue에서 가장 기본이 되는 컴포넌트 파일 형식이다.
• template, script, style 역할을 분리해서 이해하면 쉽다.
• Vue-Component, Vue-Directive, Vue-Template Syntax와 함께 보면 좋다.

---

연결문서

• Vue-Component
• Vue-Directive
• Vue-Template Syntax
• Vuejs
• Vue-환경변수