vue: Single File Component

Single File Component(SFC)는 HTML, JavaScript, CSS를 한 파일에 정의하여 Vue컴포넌트를 작성하는 방식입니다. 아래는 SFC의 구조와 실제 예제를 통해 주요 개념을 설명합니다.

 

1.SFC의 기본구조

<template>
<!--HTML 템플릿 영역-->
<div>
	<h1>{{title}}</h1>
    <button>Count: {{ count }}</button>
</div>
</template>

<script>
export default{
	data(){
    	return{
         title: "Hello, Vue!",
         count: 0
        }
    },
    methds: {
    	increment(){
        	this.count += 1;
        }
    },
}
</script>

<style>
/*CSS 스타일 영역*/
h1{color:blue;}
button{background-color:blue; color:white;}
</style>

★ Vue SFC Playground 코드 실행 →

2. 주요 구성 요소

template

<template>태그는 컴포넌트의 UI를 정의합니다. 여기에는 Vue의 템플릿 문법을 사용하여 데이터 바인딩, 이벤트 처리 등을 선언적으로 작성할 수 있습니다.

 

Script

<script>태그에서는 컴포넌트의 로직을 정의합니다. Vue의 export default를 통해 컴포넌트의 데이터, 메서드, 라이프사이클 훅등을 관리합니다.

 

Style

<style>태그에서는 컴포넌트의 스타일을 정의합니다. 필요에 딸 scope속성을 추가하여 해당 스타일을 컴포넌트에만 적용할 수도 있습니다.

 

3. SFC 예제

다음은 간단한 "todo 리스트" SFC 예제입니다.

todoList.vue 

<template>
  <div>
    <h1>Todo List</h1>
    <input v-model="newTask" placeholder="Add a new task" @keyup.enter="addTask" />
    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        <span :class="{ completed: task.done }" @click="toggleTask(index)">
          {{ task.text }}
        </span>
        <button @click="deleteTask(index)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTask: "",
      tasks: []
    };
  },
  methods: {
    addTask() {
      if (this.newTask.trim()) {
        this.tasks.push({ text: this.newTask, done: false });
        this.newTask = "";
      }
    },
    toggleTask(index) {
      this.tasks[index].done = !this.tasks[index].done;
    },
    deleteTask(index) {
      this.tasks.splice(index, 1);
    }
  }
};
</script>

<style scoped>
h1 {
  color: teal;
}
.completed {
  text-decoration: line-through;
}
button {
  margin-left: 10px;
  color: red;
}
</style>

★ Vue SFC Playground 코드 실행 →

• 데이터바인딩: v-model로 newTask와 <input>요소를 양방향 바인딩.
• 이벤트처리: @keyup.enter로 엔터 키 이벤트를 처리해 addTask호출. @click으로 목록 항목 클릭시 완료상태를 토글하거나 삭제 버튼 클릭시 항목 삭제
• 동적 렌더링: v-for를 사용해 동적으로 할 일 목록을 렌더링. :class로 completed클래스를 동적으로 적용.
•  Scoped 스타일: CSS에서 scoped를 사용하여 해당 스타일이 컴포넌트 내에만 적용되도록 설정.

4. SFC의 장점

• 코드 관리 용이성: html, js, css가 한 파일에 모여 있어 컴포넌트 단위 개발이 편리합니다.
• 재사용성: 독립적인 컴포넌트를 만들어 여러 고셍서 재사용 가능.
• 도구지원: Vite와 같은 도구는 SFC를 최적화하고 효율적으로 빌드할 수 있습니다.