[Vue.js] Single File Component: SFC

Single File Component

전역 컴포넌트는 Vue.component를 사용해 정의되고, 다음에 모든 페이지의 app 요소를 대상으로 하는 new Vue({el: '#app'})가 정의된다.

이 방법은 중소 규모 프로젝트에서는 유용하지만 복잡한 프로젝트나 프론트엔드가 JavaScript 기반인 경우에는 아래와 같은 단점이 생긴다.

1. 전역 정의로 인해 모든 컴포넌트에 고유의 이름을 붙여야 함
2. 문자열 템플릿 사용으로 html의 문법 강조가 되지 않음
3. HTML과 JavaScript가 컴포넌트로 모듈화 되어 있으나 css 스타일링 작업은 거의 불가
4. ES5를 이용하여 계속 앱을 작성할 경우 Babel 빌드가 지원되지 않음

SFC, Single File Component란 HTML과 유사한 문법을 사용하여 Vue 컴포넌트를 설명하는 커스텀  파일 형식으로, 특정 화면 영역의 HTML, CSS, JavaScript 코드를 한 파일에서 관리할 수 있는 방법이다.
이런 문제점은 .vue 확장자를 가진 SFC로 해결 가능하다. 

 

SFC로 개발하려면 Webpack과 같은 번들링 도구가 필요하다. 싱글 파일 컴포넌트의 기본 골격은 다음과 같다.

<template>
<!-- HTML -->
</template>

<script>
export default {
// JavaScript
}
</script>

<style>
/* css */
</style>

vscode에서 Vetur라는 확장 프로그램을 설치하면 .vue 파일을 만든 후 vue라고 입력했을 때, 자동완성으로 위와 같은 템플릿을 만들 수 있다.

 

 

간단하게 프로젝트 구조를 세우기 위해서는 CDN 대신 npm이나 CLI로 vue를 시작하는 것이 좋다. 

설치 방법은 아래의 이전 포스트에서 확인할 수 있다.
2023.05.22 - [Study] - [Vue.js] Vue 시작하기 (CDN vs NPM vs CLI)

[Vue.js] Vue 시작하기 (CDN vs NPM vs CLI)

 

이제, 각 언어 블록을 살펴보자.

<template>

각 .vue 파일은 하나의 template만 가질 수 있으며, template의 root에는 하나의 요소만 올 수 있다.

콘텐츠는 추출되어 @vue/compiler-dom으로 전달되고, JavaScript 렌더 함수로 사전 컴파일되며, 내보낸 컴포넌트에 render 옵션으로 첨부된다.

 

<script>

각 .vue 파일은 하나의 script만 가질 수 있으며 이 script는 ES모듈로 실행된다.

내부에는 Vue 인스턴스에 작성했던 코드를 그대로 작성하면 된다. 다만, data의 경우에는 함수 형태로 만들어 객체를 반환하도록 작성해야 한다.

<script>
new Vue({
  ...
  data: {
    inputText: ''
  }
})
</script>

위처럼 작성했던 data 영역을 아래처럼 바꿔줘야 한다.

<script>
export default {
  ...
  data() {
    return {
      inputText: ''
    }
  }
}
</script>

 

<script setup>

script setup은 composition API를 더 쉽게 읽거나 사용하기 위한 컴파일 타임 문법이다. SFC에서 compositionAPI를 사용할 경우 권장되며, 아래와 같은 이점을 제공한다.

• 더 적은 상용구로 더 간결한 코드
• 순수 TypeScript를 사용하여 props 및 내보낼(emit) 이벤트를 선언하는 기능
• 더 나은 런타임 성능(템플릿은 중간 프락시 없이 동일한 범위의 렌더 함수로 컴파일됨)
• 더 나은 IDE 타입 추론 성능(언어 서버가 코드에서 타입을 추출하는 작업 감소)

각 .vue 파일은 하나의 script setup만 가질 수 있다. 스크립트는 전처리되어 컴포넌트의 setup() 함수로 사용된다. 즉, 컴포넌트의 각 인스턴스에 대해 실행된다.

script setup 내의 최상위 바인딩은 템플릿에 자동으로 노출된다.

 

<style>

각 .vue 파일은 여러 개의 style 태그를 포함할 수 있다.

style 태그는 현재 컴포넌트에 스타일을 캡슐화하는 데 도움이 되도록 scoped 또는 module 속성을 가질 수 있다. 캡슐화를 통해 다른 컴포넌트들과의 중첩을 방지할 수 있다.

 

---

 

SFC는 Vue를 프레임워크로 정의하며 SPA(Single Page Application)나 SSG(Static-Site Generator)를 사용할 때 권장된다.

SFC 사용을 위해서는 빌드 방식을 따라야 하지만 다음과 같은 많은 이점이 있다.

• 친숙한 HTML, CSS 및 JavaScript 문법을 사용하여 모듈화된 컴포넌트 작성
• 본질적으로 사용 목적에 따라 구성됨
• 런타임 컴파일 비용이 없는 사전 컴파일된 템플릿
• 컴포넌트 범위 CSS
• 컴포지션 API로 작업할 때 더욱 인체공학적인 문법
• 템플릿과 스크립트를 교차 분석하여 컴파일 시간 최적화
• 템플릿 표현식을 지원하는 IDE의 자동 완성 및 유형 검사
• 즉시 사용 가능한 핫 모듈 교체(Hot-Module Replacement: HMR) 지원

 

---

REF

https://joshua1988.github.io/web-development/vuejs/vuejs-tutorial-for-beginner/

https://v2.ko.vuejs.org/v2/guide/single-file-components.html