Vue SFC(Single File Component)
SFC : HTML, CSS, JS를 캡슐화한 코드 블록으로 재사용 가능한 .VUE 파일
예)
<script>
export default {
data() {
return {
greeting: '안녕 Vue!'
}
}
}
</script>
<template>
<p class="greeting">{{ greeting }}</p>
</template>
<style>
.greeting {
color: red;
font-weight: bold;
}
</style>Vue SFC는 HTML,CSS 및 JS 이 3개를 자연스럽게 합친 것.
<template>,<sript>,<style> 블록은 하나의 파일에서 컴포넌트의 뷰, 로직 및 스타일을 캡슐화하고 배치
WHY SFC?
SFC 사용을 위해선 빌드 방식을 따라야 하지만, 많은 이점이 있음
1. 친숙한 HTML,CSS,JS 문법을 사용하여 모듈화된 컴포넌트 작성
2. 본질적으로 사용 목적에 따라 구성됨
3. 사전 컴파일된 템플릿
4. 컴포넌트 범위 CSS
5. 컴포지션 API로 작업할 때 더욱 인체공학적(?)인 문법
6. 템플릿과 스크립트를 교차 분석하여 컴파일 시간 더욱 최적화
7. 템플릿 표현식을 지원하는 IDE의 자동완성 및 유형 검사
8. 즉시 사용 가능한 핫 모듈 교체(Hot-Module Replacement: HMR) 지원
SFC는 Vue를 프레임워크로 정의하며, 다음과 같이 Vue를 사용하는 데 권장되는 접근 방식
- 싱글 페이지 애플리케이션 (SPA)
- 정적 사이트 생성 (SSG)
- 더 나은 개발 경험(DX)을 위해 프론트엔드 개발 방식에 합리적으로 빌드 방식 도입
작동 방식
Vue SFC는 프레임워크별 파일 형식
@vue/compiler-sfc를 통해 표준 JS와 CSS로 미리 컴파일 되있어야 함.
컴파일된 SFC는 표준 JS(ES) 모듈임. 즉, 적절한 빌드 설정으로 SFC를 모듈처럼 가져올 수 있음.
import MyComponent from './MyComponent.vue'
export default {
components: {
MyComponent
}
}관심사 분리에 대해
일부 개발자는 전통적인 웹 개발 시, 본래 사용 목적의 성격에 따라 파일 타입이 분리되었던 HTML/CSS/JS를 SFC가 다시 한 곳에 혼합한다는 우려를 가질 수 있다.
이 우려에 대한 대답은 "관심사의 분리가 파일 유형의 분리와 동일한 것이 아니다는 관점으로 바라보는 것이 중요하다"
엔지니어링 원칙의 궁극적인 목표는 코드베이스의 유지 관리 가능성을 개선하는 것.
프론트엔드 앱의 사용 목적이 점점 더 복잡해짐에 따라, 파일 유형으로만 분리하게 될 경우, 위 목표(원칙)을 달성(유지)하는 데 도움이 되지 않음
현대적인 UI 개발에서 우리는 코드베이스를 서로 얽혀 있는 세 개의 거대한 계층으로 나누는 대신 컴포넌트로 나누고 유연하게 결합하여 구성하는 것이 훨씬 더 합리적이라는 것을 발견함. 컴포넌트 내부의 템플릿, 로직 및 스타일은 본질적으로 "동일한 사용 목적"으로 결합되어 있으며, 실제로 컴포넌트가 더 응집력 있고 유지 관리가 용이해진다.
싱글 파일 컴포넌트 아이디어가 마음에 들지 않는다면, JavaScript와 CSS를 별도의 파일로 분리하여 Src Imports 방식으로 사용하여도 무관하며, 핫 리로딩 및 사전 컴파일 기능의 이점은 계속 활용할(누릴) 수 있음.
