19. Single File Component (SFC) | 언어블록 | CSS 기능

Vue에서 Single-File Component(SFC, *.vue)는 Vue 컴포넌트의

템플릿(template), 로직(script), 스타일(style)을 하나의 파일로 캡슐화 하는 특수 파일 형식 입니다.

확장자는 *.vue이며 다음은 SFC의 예 입니다.

위 예시처럼 Vue SFC는 HTML, CSS, JavaScript의 문법을 유지하면서 확장한 특수 파일 입니다.

---

언어 블록

 

<template>

• 각 *.vue 파일은 한번에 최대 하나의 top-level <template> 블록을 포함할 수 있습니다.
• 콘텐츠는 추출되어 @vue/compiler-dom으로 전달되고, javaScript 렌더 기능으로 사전 컴파일되고,
  render 옵션으로 내보내어 컴포넌트에 첨부됩니다.

 

<script>

• 각 *.vue 파일은 한 번에 최대 하나의 <script> 블록을 포함할 수 있습니다. ( <script setup> 제외)
• 스크립트는 ES 모듈로 실행됩니다.
• default export 는 일반 객체 또는 defineComponent 의 반환값으로 Vue 컴포넌트 옵션 객체여야 합니다.

 

<script setup>

• 각 *.vue파일은 한번에 최대 하나의 <script setup> 블록을 포함할 수 있습니다 (normal <script>) 제외
• <script setup>은 사전에 처리되어 컴포넌트의 setup() 함수로 사용됩니다.
• 즉, 컴포넌트의 각 인스턴스에 대해 실행됩니다. <script setup>의 최상위 바인딩은 템플릿에 자동으로 노출됩니다.
• 자세한 내용은 <script setup> 전용 문서를 참조하십시요

 

<style>

• 단일 *.vue 파일에는 여러 <style> 태그가 포함될 수 있습니다.
• <style> 태그는 현재 컴포넌트에 스타일을 캡슐화하는데 도움이 되도록 scoped 또는 module 속성 (자세한 내용은 SFC 스타일 기능 참조)을 가질 수 있습니다. 캡슐화 모드가 다른 여러 <style> 태그를 동일한 구성 요소에서 혼합할 수 있습니다.

---

Custom Blocks

 

프로젝트별 요구사항에 따라 *.vue 파일에 사용자 정의 블록을 추가할 수 있습니다.

예를 들면 다음과 같은 사용자 정의 블록 예가 있습니다.

 

• Gridsome : <page-query>
• vite-plugin-vue-gql : <ggl>
• vue-i18n : <i18n>

---

전처리기

 

<script>의 lang 속성을 사용하여 전처리기 언어를 선언할 수 있습니다.  일반적인 경우는 TypeScript를 사용하는것 입니다.

 

lang 속성은 모든 블록에 적용할 수 있습니다. 예를 들어 SASS와 Pug를 <style> 과 <template>에 적용할 수 있습니다.

---

Src 가져오기

 

.vue 컴포넌트를 여러 파일로 분할하려는 경우 src 속성을 사용하여 language block에 대한 외부 파일을 가져올 수 있습니다.

src로 가져오는 것은 webpack 모듈 요청과 동일한 경로 확인 규칙을 따릅니다. 즉 다음을 의미합니다.

상대경로는 ./ 으로 시작해야 합니다. 

 

npm 종속성에서 리소르르 가져올 수 있습니다.

 

src 가져오기는 사용자 정의 블록에서도 작동합니다. 예 :

---

CSS 기능

 

Scoped CSS

<style> 태그에 scoped 속성이 있는 경우 해당 CSS는 현재 컴포넌트의 요소에만 적용됩니다.

 

원리는 PostCSS 사용하여 아래와 같이 변환됩니다.

 

<style> 태그에 scoped를 붙인 순간 data-v-7c185b52 같은 특수한 속성이 엘리먼트에 적용되면서 

이 속성이 있는 엘리먼트에만 CSS가 적용되게 되는거다.

class도 보면 특수한 속성이 적용된 class로 변경되어 있는걸 확인 할 수 있다.

 

---

CSS 모듈

 

<style module>은 CSS 모듈 컴파일되고, CSS 클래스를 $style 객체의 속성으로 노출합니다.

결과 클래스는 충돌을 피하기 위해 해시되어 CSS 범위를 현재 컴포넌트로만 지정하는 것과 

동일한 효과를 얻습니다. 전역 예외 및 구성과 같은 자세한 내용은 CSS 모듈 사양을 참조하세요

 

Custom Inject Name

모듈 속성에 값을 제공하여 주입된 클래스 객체의 속성 키를 변경할 수 있습니다.

 

v-bind() In CSS

SFC <style> 태그는 v-bind CSS 기능을 사용하여 CSS 값을 동적 구성 요소 상태에 연결하는 것을 지원합니다.

---