# [Vue 01] VUE SFC

## 궁금한 것

- [ ] VUE의 Single File Component는 정확히 뭘까.

- [ ] 왜 다른 컴포넌트에서 import를 한다면 HTML태그마냥 사용가능한가

- [ ] 변수나 스타일의 scope는 어떻게 되는가

- [ ] 성능저하는 없는가

## 1. SFC란

```javascript
<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 사용시 더 편리한 문법을 사용할 수 있습니다.
1. -** data대신 ref, props 대신 defineProps 이런 식으로 중괄호 들어간거 안써도 되고 깔끔해서 좋다.

2. **템플릿과 스크립트를 교차 분석함으로써 더 많은 컴파일 시간 최적화를 할 수 있습니다.
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](https://github.com/vuejs/core/tree/main/packages/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>**를 이용한다면 비동기 컴포넌트를 사용할 수 있다. 초기 로딩시간 단축이 목표라면 사용해도 좋을 것 같다.

For the site tree, see the [root Markdown](https://slashpage.com/yejun-cheon.md).