[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>**를 이용한다면 비동기 컴포넌트를 사용할 수 있다. 초기 로딩시간 단축이 목표라면 사용해도 좋을 것 같다.
Subscribe to 'Yejun Cheon'
Subscribe to my site to be the first to receive notifications and emails about the latest updates, including new posts.
Join Slashpage and subscribe to 'Yejun Cheon'!
Join Slashpage and subscribe to 'Yejun Cheon'!
