[Vue 01] VUE SFC
예
예준천
배운 것을 정리합니다.
카테고리
- Vue
궁금한 것
VUE의 Single File Component는 정확히 뭘까.
왜 다른 컴포넌트에서 import를 한다면 HTML태그마냥 사용가능한가
변수나 스타일의 scope는 어떻게 되는가
성능저하는 없는가
1. SFC란
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button @click="count++">Count is: {{ count }}</button>
</template>
<style scoped>
button {
font-weight: bold;
}
</style>A Vue SFC, as the name suggests, encapsulates the component's logic (JavaScript), template (HTML), and styles (CSS) in a single file.
.vue파일 안에서 html css js를 모두 작성할 수 있는 vue3의 파일 포맷이다. 공식 홈페이지에서도 이 형식을 권장하고 있고, 사용시 얻는 장점 또한 다양하다.
2. VUE SFC 사용시 장점
1.
익숙한 HTML, CSS, JavaScript 문법을 사용하여 모듈화된 컴포넌트를 작성할 수 있습니다.
•
SFC를 사용하지 않는다면, 복잡한 export data setup 과 같은 구조를 가져야한다.
1.
밀접하게 연관된 관심사를 한 곳에 모을 수 있습니다.
•
당연한 말인 것 같다. 같은 도메인의 역할을 가진 로직과 변수 화면이 한곳에 모여 있는 것은 가독성을 높여줄 수 있다.
1.
런타임 컴파일 비용 없이 사전 컴파일된 템플릿을 사용할 수 있습니다.
•
어떤 말인지 찾아보니 vite와 같은 빌드 도구들이 로딩과정에서 .vue의 내용을 js로 컴파일하기 때문에 브라우저에 로드 된 이후 렌더링되지 않기 때문에 더 빠른 속도를 가진다고 한다.
1.
컴포넌트 스코프의 CSS를 사용할 수 있습니다.
•
이것도 은근 편리한 것 같다. 클래스명의 중복과 같은 문제로부터도 조금은 자유롭다.
1.
Composition API 사용시 더 편리한 문법을 사용할 수 있습니다.
- data대신 ref, props 대신 defineProps 이런 식으로 중괄호 들어간거 안써도 되고 깔끔해서 좋다.
- data대신 ref, props 대신 defineProps 이런 식으로 중괄호 들어간거 안써도 되고 깔끔해서 좋다.
2.
템플릿과 스크립트를 교차 분석함으로써 더 많은 컴파일 시간 최적화를 할 수 있습니다.
- 번들링 과정에서 템플릿과 연결되는 메소드는 연결하고 필요없는 건 제거해준다.
- 번들링 과정에서 템플릿과 연결되는 메소드는 연결하고 필요없는 건 제거해준다.
3.
IDE 지원으로 템플릿 표현식에 대한 자동 완성 및 타입 체킹을 할 수 있습니다.
•
이것도 처음에는 느끼지 못했지만 굉장한 장점같다.
1.
상자에서 꺼내자마자 사용할 수 있는 Hot-Module Replacement (HMR) 지원을 받을 수 있습니다.
3. 어떻게 태그처럼쓸수 있는가.
Vue SFC is a framework-specific file format and must be pre-compiled by @vue/compiler-sfc into standard JavaScript and CSS. A compiled SFC is a standard JavaScript (ES) module - which means with proper build setup you can import an SFC like a module:
SFC파일은 웹팩 에 의해서 브라우져가 이해가능한 js와 css형태로 컴파일된다. 이후 ES6의 표준적인 import과정을 거쳐 모듈을 불러오게 된다.
VUE3의 script setup에 의해 해당 컴포넌트 스코프 내에서 불러온 함수와 변수들을 사용할 수 있게 된다.
GPT에게 SFC파일의 컴파일은 어떤과정을 거쳐 일어나는지 물어봤다.
•
스크립트 변환 (Script Transformation)
1.
코드 파싱(Parsing): JavaScript 코드는 먼저 파싱 과정을 거쳐서, ECMAScript 사양에 따른 구문 트리(Syntax Tree)로 변환됩니다. 이 과정에서는 코드의 구조를 분석하고, 문법적 오류를 검사합니다.
2.
트랜스파일링(Transpiling): 대부분의 Vue 프로젝트에서는 Babel과 같은 트랜스파일러를 사용하여 최신 JavaScript(ES6 이상)를 오래된 브라우저에서도 호환 가능한 ES5 버전으로 변환합니다. 이는 화살표 함수, 클래스, 모듈 구문 등 최신 기능을 사용할 수 있게 해줍니다.
3.
모듈 해석(Module Resolution): **import**나 export 구문을 사용하는 경우, 이들은 해당 모듈에 대한 의존성을 해석하고, 필요한 모듈을 불러오거나 내보내는 과정을 처리합니다.
4.
Vue 3의 <script setup>: Vue 3에서는 <script setup> 구문을 사용하여 Composition API를 더 간결하게 사용할 수 있습니다. 이 구문은 컴포넌트의 setup 함수를 선언적으로 작성할 수 있게 해주며, 내부적으로는 해당 코드를 일반적인 <script> 코드로 변환하는 과정을 거칩니다.
•
템플릿 컴파일 (Template Compilation)
1.
HTML 파싱(Parsing): Vue 템플릿은 먼저 HTML 파서에 의해 파싱되어 DOM(Document Object Model) 노드의 트리 구조로 변환됩니다. 이 과정에서 Vue의 디렉티브(v-if, v-for 등)와 같은 특수 속성도 인식됩니다.
2.
DOM 트리 변환(Tree Transformation): 파싱된 DOM 트리는 Vue의 리액티브 시스템과 통합되도록 변환됩니다. 예를 들어, v-for 디렉티브는 반복 렌더링을 위한 JavaScript 코드로 변환됩니다.
3.
렌더 함수 생성(Render Function Generation): 최종적으로, DOM 트리는 Vue의 렌더링 함수로 변환됩니다. 이 함수는 가상 DOM을 반환하며, Vue의 리액티브 시스템에 의해 관리되어, 데이터 변화에 따라 효율적으로 DOM을 업데이트할 수 있습니다.
더 깊게는 알아보지 않기로 했다. (해서 뭐하냐ㅎㅎ…)
4. 스코프
함수나 변수
기본적으로는 local-scope이다. 부모→ 자식 / 자식→부모 의 변수,함수를 접근할 수 없다. 필요시 자식에서 export한 함수를 부모에서 import해서 사용이 가능은 하다.
스타일
기본적으로는 global-scope이지만, style scoped를 사용하면 해당 컴포넌트에만 국한시킬 수 있다.
컴포넌트내부
Vue 3의 스크립트 설정 방식에서는 **script setup**을 사용하면, 그 안에서 선언된 모든 top-level bindings(즉, 최상위 수준에서 선언된 변수, 함수 등)은 자동으로 템플릿에서 사용할 수 있게 된다. 이는 해당 변수나 함수들이 자동으로 컴포넌트의 setup() 함수에서 반환된 것처럼 취급된다는 의미이다. 그러나 자동 export는 해당 컴포넌트 내부에서만 유효합니다. 다른 컴포넌트에서 이러한 변수나 함수를 사용하려면 여전히 명시적으로 **export**를 해야한다.
5. 성능
컴포넌트를 로드하는 과정에서 우려할 수 있는 성능저하 부분은 2가지이다.
첫번째는 컴포넌트의 import 부분이다. 이는 컴포넌트의 사용여부와 무관하게 초기로딩 시간을 증가시킬 수 있다. 이를 해결하기 위해서 import()와 같은 비동기 import 코드 스플리팅을 이용하여 필요한 경우에만 로드하는 기술을 사용할 수 있다.
두번째는 컴포넌트의 마운트와 언마운트 시에 발생하는 성능저하부분이다. vue컴포넌트의 mount는 다음과 같은 과정을 거쳐 이루어진다.
•
mount과정
1.
초기화: Vue 인스턴스가 생성되고, 라이프사이클 훅과 반응형 시스템이 설정됩니다. 이 단계에서는 data, computed properties, methods, watchers 등이 초기화됩니다.
2.
템플릿 컴파일: 컴포넌트의 템플릿이 가상 DOM 노드로 변환됩니다. 이 과정에서 템플릿 구문이 분석되고, 필요한 경우 렌더링 함수로 컴파일됩니다.
3.
beforeMount 훅 실행: 이 단계에서 컴포넌트는 DOM에 삽입되기 직전에 있습니다. 이 시점에서 마지막으로 상태를 변경하거나, 이벤트 리스너를 설정할 수 있습니다.
4.
가상 DOM 렌더링 및 패치: 가상 DOM이 실제 DOM으로 변환되고, 초기 렌더링이 수행됩니다. 이 때, Vue는 효율적인 DOM 업데이트를 위해 필요한 최소한의 변경만을 적용합니다.
5.
DOM에 마운트: 렌더링된 컴포넌트가 실제 DOM에 마운트됩니다.
6.
mounted 훅 실행: 컴포넌트가 DOM에 삽입되고 나면 mounted 훅이 호출됩니다. 이 단계에서는 DOM 조작이나 비동기 작업을 수행하기 좋은 시점입니다.
가상 DOM을 구성하고, 실제 DOM에 마운트 시키고, 라이프사이클 훅들을 구성하는데 이는 성능을 저하시킬 수 있다. 그래서 마운트하지 않을 수 있는 컴포넌트는 미리 안하는게 좋을 것 같다. v-if를 사용해 조건부 렌더링을 활용할 수 있다. 하지만 빈번한 조건변경이 일어나는 경우, 오히려 만들었다가, 없애고, 만들었다가, 없애고를 반복하는 과정이 성능저하를 유발할 수있다. 이런경우를 대비해 v-show라는 걸 제공한다. dom에서 제거하지 않고 숨기기만 할 수 있는 옵션이다. 데이터도 보존되기 때문에 꽤나 유용할것 같다. 또한 **<Suspense>**를 이용한다면 비동기 컴포넌트를 사용할 수 있다. 초기 로딩시간 단축이 목표라면 사용해도 좋을 것 같다.
「Yejun Cheon」を購読
サイトを購読すると、新規投稿などの最新情報を通知やメールでいち早く受け取れます。
Slashpageに登録して「Yejun Cheon」を購読しましょう！
Slashpageに登録して「Yejun Cheon」を購読しましょう！
