[Vite] 단일 파일 컴포넌트(SFC) 사용하기

단일 파일 컴포넌트(SFC)는 Vue.js에서 컴포넌트를 정의하는 편리한 형식으로, HTML 템플릿, JavaScript 코드, 그리고 CSS 스타일을 한 파일에 작성할 수 있습니다. 이를 통해 컴포넌트를 더욱 모듈화하고 관리하기 쉽게 만들어줍니다. 이 글에서는 단일 파일 컴포넌트의 구조와 사용 방법을 알아보겠습니다.

---

단일 파일 컴포넌트 구조

단일 파일 컴포넌트는 .vue 확장자를 가진 파일로 구성됩니다. 이 파일에는 세 가지 블록으로 구분되어 있습니다.

템플릿(Template) 블록

<template>
  <!-- HTML 템플릿 코드 작성 -->
</template>

템플릿 블록은 컴포넌트의 렌더링 로직을 담당합니다. Vue.js의 템플릿 문법을 사용하여 화면에 표시할 내용을 정의합니다.

스크립트(Script) 블록

<script>
  // JavaScript 코드 작성
</script>

스크립트 블록은 컴포넌트의 동작 로직과 데이터를 정의합니다. Vue 인스턴스를 생성하고 컴포넌트 옵션을 설정하는 JavaScript 코드를 작성합니다.

스타일(Style) 블록

<style>
  /* CSS 스타일 작성 */
</style>

스타일 블록은 컴포넌트의 스타일을 정의합니다. CSS 스타일을 작성하여 컴포넌트의 디자인을 꾸밀 수 있습니다.

---

단일 파일 컴포넌트 사용하기

단일 파일 컴포넌트를 사용하려면 .vue 확장자로 된 파일을 작성해야 합니다. 예를 들어, HelloWorld.vue라는 단일 파일 컴포넌트를 만들어보겠습니다.

<!-- HelloWorld.vue -->
<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello, World!",
    };
  },
  methods: {
    changeMessage() {
      this.message = "Hello, Vue.js!";
    },
  },
};
</script>

<style>
h1 {
  color: blue;
}
button {
  margin-top: 10px;
}
</style>

위와 같이 .vue 확장자로 파일을 작성하면 템플릿, 스크립트, 스타일 블록이 각각 작성되어 있습니다.

이제 다른 Vue.js 컴포넌트에서 이 단일 파일 컴포넌트를 사용할 수 있습니다.

html
Copy code
<!-- App.vue -->
<template>
  <div>
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from "./HelloWorld.vue";

export default {
  components: {
    HelloWorld,
  },
};
</script>

위의 예시에서는 App.vue에서 HelloWorld.vue를 import하여 사용하고 있습니다. 이렇게 단일 파일 컴포넌트를 사용하면 컴포넌트를 모듈화하고 재사용성을 높일 수 있으며, 코드의 가독성과 유지보수가 용이해집니다.

단일 파일 컴포넌트를 사용하여 Vue.js 프로젝트를 개발하면 코드의 구조를 깔끔하게 유지할 수 있으며, 각 블록의 역할을 명확히 분리하여 컴포넌트 개발을 더욱 효율적으로 수행할 수 있습니다.